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

每日前端夜话第318篇

翻译:疯狂的技术宅
javascript

做者:Dr. Axel Rauschmayer
html

来源:2ality前端

正文共:1526 字java

预计阅读时间:7 分钟web

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


三种迁移策略

这是用于迁移到TypeScript的三种策略:正则表达式

  • 对于咱们的代码库,能够支持 JavaScript 和 TypeScript 文件的混合。咱们仅从 JavaScript 文件开始,而后将愈来愈多的文件切换到 TypeScript。typescript

  • 咱们能够继续使用普通的 JavaScript,并经过 JSDoc 注释添加类型信息,直到所有完成为止。这时咱们就能够切换到 TypeScript。json

  • 对于大型项目,在迁移过程当中可能会遇到太多 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


 

2020年京程一灯全新课程体系推出,点击文末 阅读全文 查看细节。


愿你在新的一年里保持技术领先,有个好前程,愿你年薪400K。咱们是认真的 !

长按二维码,加大鹏老师微信好友

拉你加入前端技术交流群

唠一唠怎样才能拿高薪

往期精彩回顾

面向开发人员的十大 NodeJS 框架

JavaScript 类完整指南

讲给前端的正则表达式

WebAssembly 正式成为 Web 的第四种语言

2020 年 Node.js 将会有哪些新功能

2020 年 Web 开发展望

从 JavaScript、ES六、ES7 到 ES10,你学到哪儿了?

15个 Vue.js 高级面试题

本文分享自微信公众号 - 前端先锋(jingchengyideng)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。

相关文章
相关标签/搜索