用什么策略把你的 JavaScript 迁移到 TypeScript

用什么策略把你的 JavaScript 迁移到 TypeScript

疯狂的技术宅 前端先锋

本文概述了将代码库从 JavaScript 迁移到 TypeScript 的策略。还提到了需要进一步阅读的材料。

三种迁移策略

这是用于迁移到TypeScript的三种策略：

• 对于我们的代码库，可以支持 JavaScript 和 TypeScript 文件的混合。我们仅从 JavaScript 文件开始，然后将越来越多的文件切换到 TypeScript。
• 我们可以继续使用普通的 JavaScript，并通过 JSDoc 注释添加类型信息，直到全部完成为止。这时我们就可以切换到 TypeScript。

• 对于大型项目，在迁移过程中可能会遇到太多 TypeScript 错误。针对错误的快照进行测试会有所帮助。
  更多信息：

• TypeScript 手册中的“从 JavaScript 迁移” (https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)

  策略1：JavaScript/TypeScript 混合代码库

如果我们用编译器选项 --allowJs，则 TypeScript 编译器支持 JavaScript 和 TypeScript 文件的混合：

• TypeScript 文件被编译。
• 将 JavaScript 文件简单地复制到输出目录中（经过一些简单的类型检查之后）。
  首先，只有 JavaScript 文件。然后我们一个接一个地将文件切换到 TypeScript。在这样做的同时，我们的代码库也在不断的被编译。

这是 tsconfig.json 的样子：

1{
2  "compilerOptions": {
3    ···
4    "allowJs": true
5  }
6}

更多信息：

• Clay Allsopp 写的“逐步将 JavaScript 迁移到 TypeScript” (https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88)

  策略2：将类型信息添加到纯 JavaScript 文件

这个方法的工作方式如下：

• 我们将继续使用当前的构建架构。
• 我们运行 TypeScript 编译器，但仅作为类型检查器（编译器选项 --noEmit）实用。
• 通过 JSDoc 注释（请参见下面的示例）和类型定义文件添加类型信息。
• 一旦 TypeScript 的类型检查器不再报错，我们将用编译器来构建代码库（类似于先前的策略）。现在不急着从 .js 文件切换到 .ts 文件，因为整个代码库已经完全有了静态类型。现在我们甚至可以生成类型文件（文件扩展名为 .d.ts）。
  以下是通过 JSDoc 注释为普通 JavaScript 指定静态类型的方式：

1/**
2 * @param {number} x - A number param.
3 * @param {number} y - A number param.
4 * @returns {number} This is the result
5 */
6function add(x, y) {
7  return x + y;
8}
9/** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */
10/** @typedef {(data: string, index?: number) => boolean} Predicate */

更多信息：

• TypeScript 手册中的“对 JavaScript 文件进行类型检查” (https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html)
• Oliver Joseph Ash 写的 “我们是如何逐步平稳的迁移到 TypeScript 的” (https://medium.com/unsplash/how-we-gradually-migrated-to-typescript-at-unsplash-7a34caa24ef1)

  策略3：通过快照测试 TypeScript 错误迁移大型项目

在大型 JavaScript 项目中，无论我们选择哪种方法，切换到 TypeScript 都可能会产生大量错误。可以选择快照测试 TypeScript 错误：

• 我们第一次在整个代码库上运行编译器。
• TypeScript 编译器产生的错误成为我们的初始快照。

• 在的代码上工作时，我们将新的错误输出与以前的快照进行比较：有时错误消失了。然后就可以创建一个新的快照。有时会出现新的错误。此时我们要么必须纠正此错误（如果可以），要么创建一个新的快照。
  更多信息：

• Dylan Vann 提出的“如何递增地将10万行代码迁移到Typescript” (https://dylanvann.com/incrementally-migrating-to-typescript/)

  结论

我们快速学习了各种迁移到 TypeScript 的策略。另外还有两个提示：

• 先实验性的进行迁移：在你的代码库上尝试各种方法，然后选择其中的一种。
• 然后为下一步制定清晰的计划。需要与你的团队交流优先顺序：
• 有时可能需要优先完成快速迁移。
• 有时，在迁移过程中保持完整功能的代码可能具有优先权。
• 等等…
  当你把代码库从 JavaScript 迁移到 TypeScript 时都经历些什么？请在评论中告诉大家！

原文链接

https://2ality.com/2020/04/migrating-to-typescript.html