将 Babel 与 TypeScript 结合使用

Babel 与 tsc 在 TypeScript 中的对比

当创建一个现代 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": {
  // 确保由 tsc 创建 .d.ts 文件，但不创建 .js 文件
  "declaration": true,
  "emitDeclarationOnly": true,
  // 确保 Babel 可以安全地转译 TypeScript 项目中的文件
  "isolatedModules": true
}

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

• isolatedModules
• declaration、emitDeclarationOnly