将 Babel 与 TypeScript 一起使用

Babel 与 tsc 之比较

在创建现代 JavaScript 项目时，你可能会问自己：把文件从 TypeScript 转换为 JavaScript 的正确方式是什么？

大多数时候，答案是 “取决于具体情况”，或者视项目而定，“可能已经有人替你决定了”。如果你使用 tsdx、Angular、NestJS 之类的现有框架，或者快速上手中提到的任何框架来构建项目，那么这个决定已经替你做好了。

不过，一个有用的经验法则是：

• 你的构建输出与源输入文件大致相同吗？使用 tsc
• 你需要具有多种潜在输出的构建流水线吗？使用 babel 进行转译，使用 tsc 进行类型检查

用 Babel 转译，用 tsc 处理类型

对于已有构建基础设施、可能已从 JavaScript 代码库移植到 TypeScript 的项目来说，这是一种常见的模式。

这种技术是一种混合方案：使用 Babel 的 preset-typescript 生成 JS 文件，然后使用 TypeScript 进行类型检查和 .d.ts 文件生成。

通过使用 Babel 对 TypeScript 的支持，你能够配合现有的构建流水线，而且由于 Babel 不会对你的代码进行类型检查，JS 输出往往更快。

类型检查与 d.ts 文件生成

使用 Babel 的缺点在于，从 TS 到 JS 的转换过程中不会进行类型检查。这意味着你在编辑器中漏掉的类型错误可能会悄悄进入生产代码。

除此之外，Babel 无法为你的 TypeScript 创建 .d.ts 文件，如果你的项目是一个库，这会使它更难使用。

要解决这些问题，你大概需要设置一个使用 TSC 对项目进行类型检查的命令。这通常意味着要把部分 Babel 配置复制到对应的 tsconfig.json 中，并确保启用以下标志：

"compilerOptions": {
  // Ensure that .d.ts files are created by tsc, but not .js files
  "declaration": true,
  "emitDeclarationOnly": true,
  // Ensure that Babel can safely transpile files in the TypeScript project
  "isolatedModules": true
}

有关这些标志的更多信息：

• isolatedModules
• declaration, emitDeclarationOnly