Vue2 彻底从 Flow 重构为 TypeScript，焕然一新！

╰半夏微凉° 2022-11-19 01:21 256阅读 0赞

事情起源于 4 月 7 号晚上，尤雨溪在推特说，Vue2 收到了一个将整个代码库迁移到 TypeScript 的 PR。

![屏幕截图.png][.png] Evan's twitter

去 Github 围观了一下chore: move to typescript 这个 PR\[1\]，基本上是 10w 行级别代码量的改动，把整个 Vue2 的代码库从原先的 flow 类型系统全部迁移到了 TypeScript，包括代码、构建系统、各种 lint 工具等等，恐怖的战斗力！

![屏幕截图.png][.png 1] Github PR

这个 PR 的贡献者是 Carlos Rodrigues\[2\]，以下是他的自我介绍：

> Fullstack developer, interested in @vuejs, @dotnet and @nodejs.
> 
> Typescript ????‍♂️
> 
> Consultant ????️‍♂️

全栈开发工程师，Vue.js、dotnet、Node.js 的爱好者。

TypeScript 魔法师 ????‍♂️

顾问 ????️‍♂️。

## 起源 ##

Vue2 为什么最开始选择 Flow 作为类型系统？其实在一个 2016 年的知乎问题Vue 2.0 为什么选用 Flow 进行静态代码检查而不是直接使用 TypeScript？\[3\]里，尤雨溪已经详细说明了这个问题，以下是当时他的回答：

这个选择最根本的还是在于**工程上成本和收益的考量**。

Vue 2.0 本身在初期的快速迭代阶段是用 ES2015 写的，整个构建工具链也沿用了 Vue 1.x 的基于 ES 生态的一套（Babel, ESLint, Webpack, Rollup...)，全部换 TS 成本过高，短期内并不现实。

相比之下 Flow 对于已有的 ES2015 代码的迁入/迁出成本都非常低：

1.  可以一个文件一个文件地迁移，不需要一竿子全弄了。
2.  Babel 和 ESLint 都有对应的 Flow 插件以支持语法，可以完全沿用现有的构建配置；
3.  更贴近 ES 规范。除了 Flow 的类型声明之外，其他都是标准的 ES。万一哪天不想用 Flow 了，用 babel-plugin-transform-flow-strip-types 转一下，就得到符合规范的 ES。
4.  在需要的地方保留 ES 的灵活性，并且对于生成的代码尺寸有更好的控制力 (rollup / 自定义 babel 插件）

不过在 2018 年的时候，尤大更新了回答，**真香定律**再现：

![屏幕截图.png][.png 2] 真香

也正因如此，Vue3 从一开始就选择了 TypeScript 作为类型系统。

## 困扰 ##

那么也许有人要问，Vue2 不是已经稳定了吗，何必再大费周章的把这么多代码迁移到 TypeScript 中呢？其实在之前 [Vue3 放弃 IE11 的 RFC][Vue3 _ IE11 _ RFC] 中就有提及，之后还是会为 Vue 2.7 去加入一些和 Vue3 语法更类似的功能：

*  把 @vue/composition-api plugin\[4\]合并进 Vue2。这会让使用 Composition API 开发的库同时支持 Vue2 和 Vue3。
 *  单文件组件（SFC）中的script setup\[5\]语法。
 *  `emits` 选项。
 *  提升 TypeScript 类型支持。
 *  在 Vite 中正式支持 Vue 2(目前通过非官方插件\[6\])

而这些功能的开发和适配，如果继续用 flow 的话，势必会带来一些割裂的开发体验。一些已经用 TS 开发好的库，也没办法做代码的合并。事实上 Twitter 也有网友提出了这个问题，PR 作者进行了回答：

![屏幕截图.png][.png 3] Why

简单来说，就是为 Vue 2.7 的开发做准备，尤其是 composition-api 的代码合并。

## 具体内容 ##

先看作者对这次更新的简单描述：

![屏幕截图.png][.png 4]

1.  代码格式化风格更新。
2.  重构。
3.  构建相关的改动。
4.  代码库更新为 TypeScript 编写。

值得一提的是，更换成 TS 之后，生成的代码体积都有少量的增加，作者猜测是 TS 加入了一些 runtime 的代码导致的：

![屏幕截图.png][.png 5]

第一个 Commit 中，作者把代码的类型全部改成 .ts，移除文件开头 flow 的标记，并且把类型的语法全部替换成 TypeScript：

![屏幕截图.png][.png 6]

作者用 TS 的 `import type` 语法重构了类型导入，我个人也比较喜欢这样导入类型，更有助于区分导入的内容：

![屏幕截图.png][.png 7]

单测工具的更新，以及 TS 的支持，利用 ts-loader 做编译：

![屏幕截图.png][.png 8]

RollUp 版本的一次大升级：

![屏幕截图.png][.png 9]

ESLint 也需要一些改动，使用 `@typescript-eslint/parser`，继承的一些推荐预设也改为 `@typescript-eslint/eslint-recommended`。

![屏幕截图.png][.png 10]

CI 中原本 flow 的类型检测，也改成使用 `tsc --noEmit` 做 TS 的类型检查。

![屏幕截图.png][.png 11]

## 评价 ##

可怕的是，这个如此庞大的 PR 是作者在几天内完成的，这战斗力简直是惊人。

Twitter 的评论中有人提问：“把如此巨大的代码库迁移到 TypeScript 需要多长时间？”

作者回答：在几小时内重命名文件，把 flow types 重写成 TS 类型并修复错误，之后的几天主要是忙构建、测试相关的工作。

![屏幕截图.png][.png 12]

对此，外国推友也表示很震惊：

> “你简直是个**机器**”：![屏幕截图.png][.png 13]

> “他生活的宇宙中，1 小时可以顶我们 24 小时，或者也可能他是用**光速**在敲代码”![屏幕截图.png][.png 14]

> CamiloR：“太棒了，很高兴核心团队之外，也有人付出如此多的努力”
> 
> Carlos：“我就是核心团队的成员 ????”![屏幕截图.png][.png 15]

## 总结 ##

不得不感叹，十倍工程师是真实存在的……这样一次巨型代码库迁移只花了短短几天时间，其实也体现出作者在 TS 生态、构建以及测试相关方面的熟悉程度。

感谢 Vue 核心团队成员们夸张的战斗力，给前端界带来这么优秀的框架而且持续迭代和优化。

Vue 3 虽然是未来，但是 Vue 2 也不会被放弃，迁移到 TS 以后的 Vue 2 具有更强的代码可移植性，一定会绽放出更多精彩。

### 最后 ###

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点个「**在看**」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -\_-）
2.  欢迎加我微信「huab119」拉你进技术群，长期交流学习...
3.  关注公众号「**前端劝退师**」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
    
    ![6db483415179c0542f6dea250c3a681b.png][]

![54d71a6d8188c7b2ce3698311ec8c9e8.png][]

点个在看支持我吧，转发就更好了

### 参考资料 ###

\[1\]

chore: move to typescript 这个 PR: *https://github.com/vuejs/vue/pull/12001/commits*

\[2\]

Carlos Rodrigues: *https://twitter.com/pikax\_dev*

\[3\]

Vue 2.0 为什么选用 Flow 进行静态代码检查而不是直接使用 TypeScript？: *https://www.zhihu.com/question/46397274/answer/101193678*

\[4\]

@vue/composition-api plugin: *https://github.com/vuejs/composition-api*

\[5\]

script setup: *https://github.com/vuejs/rfcs/pull/227*

\[6\]

非官方插件: *https://github.com/underfin/vite-plugin-vue2*

[.png]: /images/20221022/c223252a6bc94efe913969e4b4f7b109.png
[.png 1]: /images/20221022/f8246b785f8949be902451dd3b83e646.png
[.png 2]: /images/20221022/3a7f77f4ee3244ea97a91a8e7cfd51e2.png
[Vue3 _ IE11 _ RFC]: https://mp.weixin.qq.com/s?__biz=MzI3NTM5NDgzOA%3D%3D&chksm=eb07d596dc705c80b9db1bf62b0cc614b4f4012087e994ad178d5d91cfc3b9ad16f5c5ae72f0&idx=1&lang=zh_CN&mid=2247495151&scene=21&sn=981920c2345fb3a70097b2a8dfa5ba66&token=349155749#wechat_redirect
[.png 3]: /images/20221022/507c1b4b59f3488f91957a2116497bdb.png
[.png 4]: /images/20221022/8e2c8be392934a2fae703138c86a0160.png
[.png 5]: /images/20221022/866d0539040446fa987605f637d6eef7.png
[.png 6]: /images/20221022/b6562b11ca6842e29aee32d24b639586.png
[.png 7]: /images/20221022/4a3e78f4876e42439b6cb57a1df2217d.png
[.png 8]: /images/20221022/21f9dd6535b845eeb9041cdeadc23e4a.png
[.png 9]: /images/20221022/50e34d67cafc4fd4aa5bf3b9bd44ba76.png
[.png 10]: /images/20221022/6cadc08e798b41529f0f100c62e75f83.png
[.png 11]: /images/20221022/b0245cb5678e4fa8989a359bb80ea244.png
[.png 12]: /images/20221022/67602a501f9d4dc189d85b99a70002a6.png
[.png 13]: /images/20221022/2f0eda43019b43a9a61d7992085bcf81.png
[.png 14]: /images/20221022/f73492f377b24f04b6c3167e634b9439.png
[.png 15]: /images/20221022/b19a751f3c5e4b81bc3095328a5bc3ba.png
[6db483415179c0542f6dea250c3a681b.png]: /images/20221022/5b3de9712a124cc298033868b7e68596.png
[54d71a6d8188c7b2ce3698311ec8c9e8.png]: /images/20221022/00afceb852bd4053b9b9c9918beb98bf.png