使用 Babel 与 TypeScript

Babel vs tsc 用于 TypeScript

在创建现代 JavaScript 项目时，您可能会问自己，将 TypeScript 文件转换为 JavaScript 文件的正确方法是什么？

很多时候答案是“视情况而定”，或者“可能有人已经为您决定了”，具体取决于项目。如果您使用现有的框架（如 tsdx、Angular、NestJS 或 入门 中提到的任何框架）构建项目，那么此决定将为您处理。

然而，一个有用的启发式方法可能是

• 你的构建输出是否与你的源输入文件基本相同？使用 tsc
• 你需要一个具有多个潜在输出的构建管道吗？使用 babel 进行转译，使用 tsc 进行类型检查

Babel 用于转译，tsc 用于类型检查

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

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

通过使用 babel 对 TypeScript 的支持，你可以使用现有的构建管道，并且更有可能获得更快的 JS 发射时间，因为 Babel 不会对你的代码进行类型检查。

类型检查和 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