淘宝店铺是如何全面拥抱 TypeScript 的

作者 ｜贾亚宁

嘉宾 ｜林伟轩

TypeScript 在 2021 年依然保持着持续稳定的增长，甚至逐渐成为很多大厂的首选工具。相信大家这段时间也会在各个大厂的年度技术总结文章中屡屡看到 TypeScript 的身影。

TypeScript 诞生之初就是为了解决 JavaScript 由于自身的局限性在大型项目中的挑战，它已经造就了许多我们耳熟能详的项目（如：VS Code）。但是在我们日常的项目开发中，可能对它又爱又恨；爱它带来了类型安全和代码即文档的类型注释，恨它带来了大量额外的类型代码，束缚了 JavaScript 的自由洒脱。

我们都知道，对于基于 TypeScript 的中大型项目，建立严谨的研发规约是非常有必要的，那么什么样的规约是兼顾各个角色最高效的解决方案？什么样的规约可以更往前看一步？制定规约的过程中会遇到哪些挑战，又如何解决呢？

出于对以上问题的好奇，我们找到了林伟轩老师。他是阿里巴巴淘系技术部的前端开发工程师，负责淘宝旺铺，制定并推进基于 TypeScript 的研发规约在整个淘宝店铺范围内的落地。他热爱开源社区，社区昵称：林不渡；GitHub：linbudu599。专注于前端工程化、GraphQL 和 NodeJS 等。

同时林伟轩老师也是已经上线的 QCon+ 案例研习社「TypeScript 在中大型项目中的落地实践」专题的讲师，他分别从研发侧和工程侧的角度分享了淘宝店铺项目是如何制定并落地 TypeScript 研发规约的。因此我们针对 TypeScript 相关的疑惑和好奇对林伟轩老师进行了采访，让我们一起来看看老师的思考吧。

InfoQ：你最近在负责什么样的工作呢？

林伟轩：最近的话，我的核心工作范畴还是在店铺的旺铺侧，可以理解为是面向商家的 B 端产品，核心重点就是其中的旺铺装修部分，包括了移动端装修和 PC 端装修两个部分。偷偷剧透一下，移动端装修目前已经开发完毕，并开放给少数意愿强烈的商家试用当中，很期待未来它能够带给商家们便捷快速的店铺装修体验。

InfoQ：你们团队在选择 TypeScript 时，是基于什么考虑呢？

林伟轩：首先，做出迁移到 TypeScript 这个决定的过程中，团队中的意见基本是一致的，我们都认为，对于 B 端产品以及部分稳定性要求高的 C 端产品来说，使用 TypeScript 带来的收益一定会远远超出成本。比如我们收获了维护性、可读性、稳定性的成倍提升，通过 TypeScript 的类型定义作为协议层统一了许多分散的依赖库，提升了大家的代码质量等等。而对于一部分零散的独立模块，它们的变动是非常少的，但又非常重要，比如店铺域内官方提供的装修模块，我们就决定保持现状，因为迁移可能会带来超出预期的成本和不确定因素。

其次，我们在迁移上也有着长期的规划，如我在 QCon+ 案例研习社的分享里提到的，旺铺装修只是一个试点项目，在它之前与之后，我们还有数个重点项目也开始陆陆续续地迁移到 TypeScript，并且这些后续的过程也很好地借鉴了旺铺装修迁移过程中的经验与教训。

最后一点，基于 TypeScript 我们才能够推广更严格的约束，对人和对代码都是，包括 Code Review 要求、Lint、源码的解析、基于类型声明的统一协议层等等。

InfoQ：从 JavaScript 项目迁移到 TypeScript，你有什么印象深刻的踩坑经历吗？

林伟轩：我个人对 TypeScript 还算熟练，因此过程中倒是也没有遇到过代码层面的坑。但是我很享受将凌乱的 JavaScript 代码转变成干净整洁的 TypeScript 代码的过程。对比来看，在工程层面我倒是遇到了不少问题，如印象最深刻的一点我在 QCon+ 案例研习社的分享中也提到了，那就是在迁移工作开始的初期，没有明确好当前的工作重点，总是在添加类型时手痒地去改逻辑，并认为只要类型不报错就不会有问题，这导致了在后续出现问题时我需要一点点回滚代码去检查，最后往往发现就是当时以为不会产生问题的小小改动导致的。

在这种情况发生几次之后，我开始建立严格的分期规划，让每一期的职责完全独立开来，控制自己的手不去做超出当前规划范围的事情。同时确定了各部分最小修改单元的粒度，在完成一个单元的修改后就进行前后差异的检查，不是每修改一行文件，也不是每修改一天的文件。

这个困难看起来很简单，但它涉及到了一个核心问题，引入 TypeScript 是只为了添加类型来让项目更好维护，还是说想把整个项目的逻辑完全重写？这是你需要思考的问题，也需要基于自己更关注的问题做对应的规划和预案，而不是说我全都要，来把这两件事情混为一谈，这往往会导致灾难性的后果。也就是说，先确认你最希望从迁移到 TypeScript 得到哪些收益，然后基于此收益展开做规划，一次一口，勿贪得无厌。

InfoQ：你认为 TypeScript 未来是否能得到浏览器和 Node.js 原生支持呢？

林伟轩：我认为不太可能，首先说最现实的，TypeScript 的性能难以恭维。它需要类型检查，需要加载所有文件到内存，如果浏览器来做 TypeScript 到 JavaScript 的编译，那网页的性能无疑会受到严重的影响，类似的我们也可以认为 Node 同样不会原生支持，参考 Deno 将许多内部的 TypeScript 代码又重写回了 JavaScript。其次，TypeScript 本身的核心是编译时的检查，浏览器直接将其作为运行时支持基本上是没有意义的，因为类型的错误并不影响实际的代码运行，反而白白浪费了检查的时间。

还有许多 TypeScript 拥簇者其实忽略了一个大家伙——ECMAScript，它才是 JavaScript 的实现提案。TypeScript 比 ECMAScript 提前实现了很多进行到 Stage3 阶段的语法，如可选链、空值合并、装饰器以及一些 Class 语法等。对于在 TypeScript 实现完毕后又发生了变化的提案，比如装饰器，TypeScript 实现基于第一版 TC39 的装饰器提案，而目前装饰器提案已经进行到了第三版，实现已经和之前有了比较大的差异，那这可能就会在未来埋下一个祸根，或者说伏笔了。

总的来说，我们仍然会大量的使用 TypeScript，但我个人不认为它会得到浏览器和 Node 的原生支持，我们也不需要关注这一点，就像它自己都只关心编译到 JavaScript 的过程一样。

InfoQ：你在使用 TypeScript 重构的过程中，如何协调各方之间的需求呢？

林伟轩：实际上我理解对于 B 端性质的产品，负责的 PD 与测试同学对于技术改造往往持积极态度，因为正常来说技术改造能带来更高的开发效率和更好的稳定性，后面做起性能优化来也会简单不少。

而在协调资源层面，我觉得最重要的点，还是改造的发起者是否有清晰的规划，让 PD 和测试同学了解改造的节奏，需要的时间，是否存在风险，有没有健全的灰度、监控、回滚机制等等。其次就是需要协调出可投入技术改造的时间段，比如每个月留多少个人日，需求节奏放缓的阶段等等，根据这些情况再进一步完善整体的排期。

对于测试同学，一个比较良好的方式是在每一期完成后就进行一次回归测试，而不是在全部完成后再进行，以此避免过重的工作量和难以定位的问题。

对于团队层面来说，我暂时没有办法给出有用的经验，因为我自身也是一线开发而不是管理者，我看到的往往只是从自身的各种因素出发看到的结论，比如说在团队成员水平不一致的情况下，是否可以将首期，甚至前几期的要求适当放低，或者将整个迁移过程分更多期来帮助能力暂时不足的成员用较平缓的方式过渡。

InfoQ：最后，有一个关于个人成长的话题，你是如何能在一毕业就加入阿里这种互联网大厂的呢？

林伟轩：我个人其实不是科班出身，大学学的是管理科学。我在 2021 年校招加入阿里，目前算上实习的时间，工作经验差不多刚满一年。我个人踏上前端的路其实比较奇妙，从误触 F12 打开浏览器控制台知道什么是前端，到在网上看了一些前端的学习资源，再到加入学校工作室在一批 Nice 而有趣的人的帮助下一路成长到今天，这个经历不太具有复制性，这里就不赘述了。

我想分享一下我的做事原则和态度，我相信这几点正是推动我走到今天的力量：

1. 换位思考、同理心，以及尊重。

马伯庸在《显微镜下的大明》一书中说到：“读史有一个很重要的原则，就是不要轻易把古人当白痴。我们今天可以看到的历史，和当时人的视角不同，获得的信息亦不同。如果设身处地去想，就能明白，很多看似愚蠢的举动，自有其逻辑和动机。”说白了就是，当我们在接触人事物，尤其是比较陌生的人事物时，一定不能从旁观者的角度直接给出评价，因为这必然过于主观和局限。我们该做的是将自己代入到对方的情境中，尽可能客观地评估自己相对于对方的意义，绝对不要以自我为中心。

2. 保持对技术的热情与创新的初衷。

这一点我想不必多说，每个技术人都应该拥有。松本行弘说他最快乐的就是让其他的开发者能使用他的发明创造去做更多富有激情的事情。对于我来说，最快乐的事情就是自己的技术让更多的普通人享受到了互联网的便利。

3. 独立自主的成长。

在内卷文化盛行的当下，我还是要说，不要焦虑、不要比较、不要急躁。不要因为别人会了自己不会的东西就莫名焦虑，为什么要做别人的影子呢？只学自己感兴趣的，只看自己想看到的；不要下意识地给自己设定竞争对手，否则不就是给自己设限吗？当你超越了这个竞争对手，你是继续确立下一个对手还是站在山巅之上茫然无措呢？不要因为未知的领域茫茫无尽就焦躁不安，没有人能探索完世界的每一个角落，你会因为没去过纽约、巴黎、莫斯科就痛苦吗？不会，因为这不会影响你的生活，同样的，专注 C 端产品的前端工程师也不会因为没用过 Express 就寸步难行。认清楚你最需要的，活在当下就好。

嘉宾简介

林伟轩 阿里巴巴 淘宝前端开发工程师

社区昵称：林不渡，现就职于阿里巴巴淘系技术部，负责淘宝旺铺，制定并推进基于 TypeScript 的研发规约在整个淘宝店铺范围落地。热爱开源社区，GitHub：linbudu599，专注于前端工程化、GraphQL、NodeJS 等。

相关阅读

林伟轩实操专题：TypeScript 类型系统实战课：自顶向下学习类型系统

郭翔 GMTC 分享：未来可期的 TypeScript