迁移 (到 TypeScript) 速查表

本速查表汇集了来自真实案例研究的建议和实用程序，这些案例研究涵盖了将大型代码库从纯 JS 或 Flow 迁移到 TypeScript 的团队。它并没有试图去 *说服* 人们这样做，但我们确实收集了公司在其转换体验后提供的少量统计数据。

⚠️ 本速查表非常新，需要我们尽一切努力改进。欢迎提供可靠的建议、结果和最新的内容。

先决条件

阅读 TypeScript 从 JS 迁移的官方指南，并且您应该已经熟悉他们的 React 转换指南。

通用转换方法

级别 0：不使用 TypeScript，使用 JSDoc
- 请参阅我们的 JSDoc 部分
级别 1A：大部分 JavaScript，逐渐使用更严格的 TypeScript
- 如官方 TS 指南中推荐
- 使用 allowJS（经验：clayallsop，pleo)
级别 1B：从一开始就完全重命名为 TypeScript
- "将所有 .js 文件重命名为 .ts"？
- 从最宽松、最基本的设置开始使用。
级别 2：严格的 TypeScript
- 使用 Microsoft 的 dts-gen 为未类型化的文件生成 .d.ts 文件。此 SO 答案详细介绍了该主题。
- 使用 declare 关键字进行环境声明 - 请参阅声明合并以内联修补库声明。

成功公司采用的其他技巧/方法

对于没有类型定义的库，使用 @ts-expect-error 处理编译器错误。
选择 ESLint 而不是 TSLint（来源：ESLint 和 TS 路线图）。您可以使用此工具将 TSlint 转换为 ESlint。
新代码必须始终使用 TypeScript 编写。没有例外。对于现有代码：如果您的任务需要更改 JavaScript 代码，则需要重写它。（来源：Hootsuite)

Webpack 提示

webpack 加载器：awesome-typescript-loader 与 ts-loader？（社区对此存在一些分歧 - 但请阅读 awesome 的观点)
Webpack 配置

module.exports = {

resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
},

// Source maps support ('inline-source-map' also works)
devtool: 'source-map',

// Add the loader for .ts files.
module: {
  loaders: [{
-       test: /\.jsx?$/,
-       loader: 'babel-loader',
-       exclude: [/node_modules/],
+       test: /\.(t|j)sx?$/,
+       loader: ['awesome-typescript-loader?module=es6'],
+       exclude: [/node_modules/]
+   }, {
+       test: /\.js$/,
+       loader: 'source-map-loader',
+       enforce: 'pre'
  }]
}
};