ts-node

使用 ts-node 来无需编译直接启动 ts 文件

使用方式（仅给项目单独使用的话不需要装在全局）

1

npm i ts-node typescript -g

问题

当在 typescript.json 中配置 alias 路径别名来做到快速跳转时，ts-node 并不认识这个别名是什么

1

Error: Cannot find module '@/utils/format'

原因：

• ts-node 无法识别 alias， 毕竟这玩意严格意义来说属于 webpack
• ts-node 7.0.0 后不再支持自动识别 tsconfig.json了，且无法识别本地声明文件，需要添加--files 参数才能识别

解决

安装一个叫 tsconfig-paths 的包，修改启动 script

1
2
3

npm i -D tsconfig-paths
# 启动 script
ts-node -r tsconfig-paths/register app.ts --files

global 与 json 引入

global

NodeJS 中为 global 赋值时，会出现问题

1
2

// TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
global.wdnmd = false

需要手动创建一个声明文件，定义 global 上的参数

1
2
3
4
5
6
7

// xxx.d.ts
declare global {
    // 务必使用 var
    var wdnmd: boolean
}
// 标记为外部模块，扩大 global 的范围
export {}

json 引入

直接引入 json 会出现类型错误（其实不止 json，scss 也一样，但处理方式基本都类似）

1
2

// TS2732: Cannot find module '../package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.
import packageInfo from './package.json'

解决方式同样是新建一个声明文件

1
2
3
4
5

// xxx.d.ts
declare module '*.json' {
    const value: any // 定义内容类型
    export default value
}

eslint 无法识别类型文件

定义了这么一个类型文件

1
2
3
4

// xxx.d.ts
declare namespace Env {
    type EnvType = 'development' | 'test' | 'production' | 'preview'
}

使用时被 eslint 报了错

1
2

// ESLint: 'Env' is not defined.(no-undef)
const NODE_ENV: Env.EnvType = env.NODE_ENV

在 .eslintrc.js 中，无须愧疚的关掉这个规则，因为它提供的检查已经由 TypeScript 提供了，而且 TypeScript 做的比它更好

1
2
3

{
    "no-undef": 0
}

eslint 诡异的报错

普通的一天写了个普通的 class 报了个普通的错

1
2
3
4
5
6
7
8
9

class ChromeDriver {
    // ESLint: Parsing error: Unexpected token
    private isPending: boolean
    private browser?: Browser

    constructor() {
        this.isPending = false
    }
}

当时的 .eslintrc.js

1
2
3
4
5

module.exports = {
    parserOptions: {
        parser: 'babel-eslint'
    }
}

都写 TypeScript 自然要用针对 TypeScript 的解析器才行，ESLint 对 TypeScript 的解析器用的是 @typescript-eslint/parser，修改 .eslintrc.js

1
2
3
4
5

module.exports = {
    parserOptions: {
        parser: '@typescript-eslint/parser'
    }
}

别忘了下载这个解析器

1

npm i @typescript-eslint/parser -D

编译 TypeScript 项目

对于 NodeJS 应用，开发完毕后需要手动将 TypeScript 编译为 JavaScript，此时需要转换代码中的 alias 别名。

默认情况下 TypeScript 的编译器无法转换 alias 别名，我们借助插件 typescript-transform-paths，它可以将项目中的别名转换为正确的路径。

1
2

# 安装 typescript-transform-paths
npm i typescript-transform-paths -D

修改 tsconfig.json，配置插件实现自定义转换器:

1
2
3
4
5
6
7
8
9
10

{
  "compilerOptions": {
    "plugins" : [
      {
        "transform": "typescript-transform-paths"
      }
    ]
  }
}

但目前 TypeScript 不支持 tsconfig.json 中的自定义转换器，即不支持通过 tsc 命令使用自定义转换器编译文件。

因此这里需要借助一个工具 ttypescript。TypeScript 允许通过编程方式来使用自定义转换器，该工具借助此特性自行提供了 ttsc 命令来解决 tsc 无法使用自定义转换器的问题。

该工具使用本地安装的 TypeScript，因此需要保证同步安装 TypeScript，无版本限制。

1
2

# 安装 ttypescript
npm i ttypescript -D

像使用 tsc 一样的方式编译 TypeScript 文件

1

ttsc

需要注意的是，typescript-transform-paths 无法识别 import(\) 中的别名