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

时间 2020-04-25 标签什么策略把你 javascript 迁移 typescript

做者：Dr. Axel Rauschmayer
翻译：疯狂的技术宅javascript

原文：https://2ality.com/2020/04/mi...html

未经容许严禁转载前端

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

三种迁移策略

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

对于咱们的代码库，能够支持 JavaScript 和 TypeScript 文件的混合。咱们仅从 JavaScript 文件开始，而后将愈来愈多的文件切换到 TypeScript。
咱们能够继续使用普通的 JavaScript，并经过 JSDoc 注释添加类型信息，直到所有完成为止。这时咱们就能够切换到 TypeScript。
对于大型项目，在迁移过程当中可能会遇到太多 TypeScript 错误。针对错误的快照进行测试会有所帮助。

更多信息：面试

TypeScript 手册中的“从 JavaScript 迁移”

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

若是咱们用编译器选项 --allowJs，则 TypeScript 编译器支持 JavaScript 和 TypeScript 文件的混合：typescript

TypeScript 文件被编译。
将 JavaScript 文件简单地复制到输出目录中（通过一些简单的类型检查以后）。

首先，只有 JavaScript 文件。而后咱们一个接一个地将文件切换到 TypeScript。在这样作的同时，咱们的代码库也在不断的被编译。json

这是 tsconfig.json 的样子：segmentfault

{
  "compilerOptions": {
    ···
    "allowJs": true
  }
}

更多信息：服务器

Clay Allsopp 写的 “逐步将 JavaScript 迁移到 TypeScript”

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

这个方法的工做方式以下：

咱们将继续使用当前的构建架构。
咱们运行 TypeScript 编译器，但仅做为类型检查器（编译器选项 --noEmit）实用。
经过 JSDoc 注释（请参见下面的示例）和类型定义文件添加类型信息。
一旦 TypeScript 的类型检查器再也不报错，咱们将用编译器来构建代码库（相似于先前的策略）。如今不急着从 .js 文件切换到 .ts 文件，由于整个代码库已经彻底有了静态类型。如今咱们甚至能够生成类型文件（文件扩展名为 .d.ts）。

如下是经过 JSDoc 注释为普通 JavaScript 指定静态类型的方式：

/**
 * @param {number} x - A number param.
 * @param {number} y - A number param.
 * @returns {number} This is the result
 */
function add(x, y) {
  return x + y;
}
/** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */
/** @typedef {(data: string, index?: number) => boolean} Predicate */

更多信息：

TypeScript 手册中的“对 JavaScript 文件进行类型检查”
Oliver Joseph Ash 写的 “咱们是如何逐步平稳的迁移到 TypeScript 的”

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

在大型 JavaScript 项目中，不管咱们选择哪一种方法，切换到 TypeScript 均可能会产生大量错误。能够选择快照测试 TypeScript 错误：

咱们第一次在整个代码库上运行编译器。
TypeScript 编译器产生的错误成为咱们的初始快照。
在的代码上工做时，咱们将新的错误输出与之前的快照进行比较：有时错误消失了。而后就能够建立一个新的快照。有时会出现新的错误。此时咱们要么必须纠正此错误（若是能够），要么建立一个新的快照。

更多信息：

Dylan Vann 提出的“如何递增地将10万行代码迁移到Typescript”

结论

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

先实验性的进行迁移：在你的代码库上尝试各类方法，而后选择其中的一种。
而后为下一步制定清晰的计划。须要与你的团队交流优先顺序：
- 有时可能须要优先完成快速迁移。
- 有时，在迁移过程当中保持完整功能的代码可能具备优先权。
- 等等...

当你把代码库从 JavaScript 迁移到 TypeScript 时都经历些什么？请在评论中告诉你们！

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...