将 30 万行代码从 Flow 迁移到 TypeScript 是一种怎样的体验?

640?wx_fmt=gif

640?wx_fmt=jpeg

做者 | Roger Goldfingerpython

译者 | 弯月算法

责编 | 伍杏玲typescript

出品 | CSDN(ID:CSDNnews)数据库

【CSDN 编者按】本文做者在当前正在使用 Flow 下,想一次性切换到TypeScript,涉及30万行代码,他们迁移的过程值得咱们借鉴:合并TypeScript工具,再反复进行练习,成功在12分钟内成功经过CI流程,并最后修复错误redux

咱们公司一直致力于改善开发人员的工做体验。在使用Flow度过了两年愉快的开发时光后,最近咱们决定转而采用TypeScript,由于TypeScript有良好的社区支持、好的编辑体验、支持的类型也更多。小程序

因而,咱们决定一次性把Flow转成TypeScript。安全

咱们使用自动转换工具迁移了2,700个Javascript文件,并在12分钟内成功经过CI流程,接下来咱们马上就能享受新语言带来的优点了。与逐步迁移相比,(这样作)咱们省却了大量的操做复杂性,并最大限度地减轻了给工程团队带来的负担和影响。在通过了一周的TypeScript学习后,软件工程师们再次重回岗位,开始了更为迅速地开发做业。微信

 

640?wx_fmt=png

为什么作出这种改变?babel

 

在过去的两年中,咱们一直在使用Flow来处理咱们Javascript代码中的类型。咱们有40名工程师负责开发Web代码,良好的类型系统能够确保代码的正确性、加快新来工程师的适应速度,且有助于安全的重构。当时,Flow是一个正确的选择,逐步采用支持意味着咱们能够慢慢适应。编辑器

最近随着TypeScript的崛起,愈来愈多的人选择TypeScript,咱们也仔细研究了咱们使用的Flow。一直以来咱们都知道,Flow与编辑器的集成有时很是缓慢,并且应用程序的核心部分(好比Redux状态和组件props)并无添加有意义的类型,部分缘由是Flow对redux和reselect的typedef支持有问题。因为相应的Flow类型库的维护者已经很长时间没有更新了,因此咱们也担忧Flow的将来。

在开始接触TypeScript后,咱们惊人地发现VSCode对该编辑器的支持很是好,并且还有不少很是有帮助的错误消息,此外社区的支持也很给力。再加上其余流行的代码库和项目,让咱们欣喜若狂,咱们愈加确定这是正确的方向。

 

640?wx_fmt=png

实际的代码迁移过程

 

迁移近30万行的代码,这个工做量彷佛超出了手动的承受范围,因此咱们决定一次性转换整个代码库,使用babel插件完成语法的修改,再经过一个脚本重命名文件。

咱们考虑过逐步迁移,一次将一个文件迁移到TypeScript中。为了在迁移期间保留跨语言的类型,咱们能够输出两种语言的定义文件,而后生成这些定义文件到另外一种语言的转换。最终,咱们担忧这种方法过于复杂,工程师必须掌握代码库中两种不一样的语言,而且迁移可能须要很长时间,这个过程一般还会增长现有工做的复杂性。

为了准备大规模迁移,首先咱们合并了TypeScript工具,例如配置Babel和设置ESLint。咱们一遍又一遍地反复练习迁移的过程,练习快速地可靠地让转换后的代码库经过CI流程,并在运行手册上记录了这个过程。

到最后的时候,咱们可以在12分钟内完成全部的代码迁移,并执行完全部的手动步骤经过CI流程。这确保咱们可以最大限度地减小对工程师现有工做的干扰,并确保咱们有时间解决意外发生的问题。

最后,在咱们约定好的那一天,咱们快速冻结了代码库,而后执行了手册上的全部步骤,对这些变动进行了一些手动测试,并将代码合并到了生产中。

 

640?wx_fmt=png

修复错误

 

固然,迁移到TypeScript中的代码库存在不少错误(大约有6千多个),咱们决定暂且经过注释// @ ts-ignore忽略这些错误,先经过CI流程再说。毕竟,Flow的类型覆盖没有捕获到这些错误。只有忽略这些错误,咱们才可以一次性地完成迁移,而无需在修复错误的过程当中冻结整个代码库。

咱们编写了一个脚本,自动将// @ ts-ignore注释插入到咱们的大多数代码中,同时保证这些忽略掉的都是由于JSX过于复杂。因而,咱们的JSX中残留了大约1,400个错误,在接下来的一周里,咱们每一个人都动手修复这些错误。这为咱们每一个人提供了一次很好的学习TypeScript的机会,在修复剩余错误的过程当中,咱们熟悉了类型系统和最佳实践。

 

640?wx_fmt=png

迁移成功

 

整体而言,这次代码迁移很是成功。咱们将类型覆盖率从66%增长到86%,如今从Redux链接器到React组件树,都已经拥有完整的类型定义。VSCode提供的编辑体验更加便捷,更加可靠,咱们在修复错误时,发现了更多代码中的错误。最重要的是,工程师开始信任类型系统。

固然,在迁移过程当中,还有一些有待改善的地方。在内部检讨会议上,咱们提出了如下有待改进的地方:

  • 咱们应该开展更多教育和配对活动,并共同努力解决常见的错误。每一个团队的TypeScript表明都应该积极地传播知识并推进代码迁移。

  • 咱们应该事先为产品团队所需的工做设定更清晰的指望,并为团队提供一种简单的方法,让他们知道他们应该作什么工做以及迁移过程当中剩下的工做。

  • 咱们应该花更多的时间来确保UI组件和其余链接器代码已加入了正确的类型。

在接下来几个月内,咱们将继续作一些更新,并为实现类型错误的零忽略而继续努力。

原文:https://medium.com/tech-quizlet/now-or-never-migrating-300k-loc-from-flow-to-typescript-at-quizlet-d3bae5830a1

本文为 CSDN 翻译,转载请注明来源出处。

这几个Python技能实战,能让你少些1000行代码!

https://edu.csdn.net/topic/python115?utm_source=csdn_bw

【END】

640?wx_fmt=jpeg

 热 文 推 荐 

☞360 小程序来了,进攻 PC 端!

告别大妈的灵魂拷问,Python 教你轻松完成垃圾分类!

微信停机断网可充话费;苹果正研发可折叠屏幕 iPad;Rust 1.36.0 发布 | 极客头条

为何说苹果是惟一在意你隐私的科技公司?

☞中国有微信和支付宝, 你为啥还费力不讨好去作区块链? | 人物志

☞数据库风云:老骥伏枥,新秀辈出

☞智能文本信息抽取算法的进阶与应用

☞正态分布为什么如此重要?

☞泪目!Linux之父:我就是以为苹果太没意思!

640?wx_fmt=gif点击阅读原文,输入关键词,便可搜索您想要的 CSDN 文章。

640?wx_fmt=png你点的每一个“在看”,我都认真当成了喜欢