Skip to content

第 81 条: 使用 allowJs 混合使用 TypeScript 和 JavaScript

要点

  • 使用 allowJs 编译选项来支持在过渡项目时混合使用 JavaScript 和 TypeScript。
  • 在开始大规模迁移之前,先确保你的测试和构建链与 TypeScript 一起正常工作。

正文

对于小项目,你可以一次性从 JavaScript 切换到 TypeScript。但对于大项目,这种"暂停一切"的方式行不通。你需要逐步过渡,这意味着要让 TypeScript 和 JavaScript 共存。

关键就是 allowJs 编译器选项。开启后,TS 和 JS 文件可以互相导入。对 JS 文件该模式极其宽松——除非使用@ts-check(第 80 条),否则只会报语法错误。这是最浅层的"TS 是 JS 超集"的体现。

虽然 allowJs 不太能发现错误,但它让你能在修改代码前先把 TS 引入构建流程。这很有用,因为如第 82 条所述,在转换单个模块为 TS 时你需要能运行测试。

如果你的打包工具支持 TS 或有插件(比如 webpack 安装 ts-loader):

bash
$: npm install --save-dev ts-loader

然后在 webpack.config.js 配置:

js
module.exports = {
  module: {
    rules: [{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }],
  },
}

多数测试工具也有类似方案。比如 Jest 安装 ts-jest 后,在 jest.config.js 配置:

js
module.exports = {
  transform: { '^.+\\.tsx?$': 'ts-jest' },
}

如果是 Node.js 环境,最简单是用 ts-node:

bash
$: node -r ts-node/register main.ts

自定义构建流程会更复杂,但有备用方案:设置 outDir 选项,然后 TS 会生成纯 JS 代码,原有构建流程通常能直接处理。你可能需要调整 targetmodule 等选项使输出贴近原 JS 代码。

虽然配置构建和测试流程不太有趣,但这是安全迁移代码的基础(下条会详述)。

关键点总结

  • 使用 allowJs 编译选项来支持在过渡项目时混合使用 JavaScript 和 TypeScript。
  • 在开始大规模迁移之前,先确保你的测试和构建链与 TypeScript 一起正常工作。

Released under the MIT License.