Vue2 徹底從 Flow 重構(gòu)為 TypeScript，煥然一新！

事情起源于 4 月 7 號晚上，尤雨溪在推特說，Vue2 收到了一個將整個代碼庫遷移到 TypeScript 的 PR。

去 Github 圍觀了一下chore: move to typescript 這個 PR^[1]，基本上是 10w 行級別代碼量的改動，把整個 Vue2 的代碼庫從原先的 flow 類型系統(tǒng)全部遷移到了 TypeScript，包括代碼、構(gòu)建系統(tǒng)、各種 lint 工具等等，恐怖的戰(zhàn)斗力！

這個 PR 的貢獻(xiàn)者是 Carlos Rodrigues^[2]，以下是他的自我介紹：

Fullstack developer, interested in @vuejs, @dotnet and @nodejs.

Typescript ???♂?

Consultant ????♂?

全棧開發(fā)工程師，Vue.js、dotnet、Node.js 的愛好者。

TypeScript 魔法師 ???♂?

顧問 ????♂?。

起源

Vue2 為什么最開始選擇 Flow 作為類型系統(tǒng)？其實在一個 2016 年的知乎問題Vue 2.0 為什么選用 Flow 進(jìn)行靜態(tài)代碼檢查而不是直接使用 TypeScript？^[3]里，尤雨溪已經(jīng)詳細(xì)說明了這個問題，以下是當(dāng)時他的回答：

這個選擇最根本的還是在于工程上成本和收益的考量。

Vue 2.0 本身在初期的快速迭代階段是用 ES2015 寫的，整個構(gòu)建工具鏈也沿用了 Vue 1.x 的基于 ES 生態(tài)的一套（Babel, ESLint, Webpack, Rollup...)，全部換 TS 成本過高，短期內(nèi)并不現(xiàn)實。

相比之下 Flow 對于已有的 ES2015 代碼的遷入/遷出成本都非常低：

1. 可以一個文件一個文件地遷移，不需要一竿子全弄了。
2. Babel 和 ESLint 都有對應(yīng)的 Flow 插件以支持語法，可以完全沿用現(xiàn)有的構(gòu)建配置；
3. 更貼近 ES 規(guī)范。除了 Flow 的類型聲明之外，其他都是標(biāo)準(zhǔn)的 ES。萬一哪天不想用 Flow 了，用 babel-plugin-transform-flow-strip-types 轉(zhuǎn)一下，就得到符合規(guī)范的 ES。
4. 在需要的地方保留 ES 的靈活性，并且對于生成的代碼尺寸有更好的控制力 (rollup / 自定義 babel 插件）

不過在 2018 年的時候，尤大更新了回答，真香定律再現(xiàn)：

也正因如此，Vue3 從一開始就選擇了 TypeScript 作為類型系統(tǒng)。

困擾

那么也許有人要問，Vue2 不是已經(jīng)穩(wěn)定了嗎，何必再大費(fèi)周章的把這么多代碼遷移到 TypeScript 中呢？其實在之前 Vue3 放棄 IE11 的 RFC 中就有提及，之后還是會為 Vue 2.7 去加入一些和 Vue3 語法更類似的功能：

• 把 @vue/composition-api plugin^[4]合并進(jìn) Vue2。這會讓使用 Composition API 開發(fā)的庫同時支持 Vue2 和 Vue3。
• 單文件組件（SFC）中的script setup^[5]語法。
• emits 選項。
• 提升 TypeScript 類型支持。
• 在 Vite 中正式支持 Vue 2(目前通過非官方插件^[6])

而這些功能的開發(fā)和適配，如果繼續(xù)用 flow 的話，勢必會帶來一些割裂的開發(fā)體驗。一些已經(jīng)用 TS 開發(fā)好的庫，也沒辦法做代碼的合并。事實上 Twitter 也有網(wǎng)友提出了這個問題，PR 作者進(jìn)行了回答：

簡單來說，就是為 Vue 2.7 的開發(fā)做準(zhǔn)備，尤其是 composition-api 的代碼合并。

具體內(nèi)容

先看作者對這次更新的簡單描述：

1. 代碼格式化風(fēng)格更新。
2. 重構(gòu)。
3. 構(gòu)建相關(guān)的改動。
4. 代碼庫更新為 TypeScript 編寫。

值得一提的是，更換成 TS 之后，生成的代碼體積都有少量的增加，作者猜測是 TS 加入了一些 runtime 的代碼導(dǎo)致的：

第一個 Commit 中，作者把代碼的類型全部改成 .ts，移除文件開頭 flow 的標(biāo)記，并且把類型的語法全部替換成 TypeScript：

作者用 TS 的 import type 語法重構(gòu)了類型導(dǎo)入，我個人也比較喜歡這樣導(dǎo)入類型，更有助于區(qū)分導(dǎo)入的內(nèi)容：

單測工具的更新，以及 TS 的支持，利用 ts-loader 做編譯：

RollUp 版本的一次大升級：

ESLint 也需要一些改動，使用 @typescript-eslint/parser，繼承的一些推薦預(yù)設(shè)也改為 @typescript-eslint/eslint-recommended。

CI 中原本 flow 的類型檢測，也改成使用 tsc --noEmit 做 TS 的類型檢查。

評價

可怕的是，這個如此龐大的 PR 是作者在幾天內(nèi)完成的，這戰(zhàn)斗力簡直是驚人。

Twitter 的評論中有人提問：“把如此巨大的代碼庫遷移到 TypeScript 需要多長時間？”

作者回答：在幾小時內(nèi)重命名文件，把 flow types 重寫成 TS 類型并修復(fù)錯誤，之后的幾天主要是忙構(gòu)建、測試相關(guān)的工作。

對此，外國推友也表示很震驚：

“你簡直是個機(jī)器”：

“他生活的宇宙中，1 小時可以頂我們 24 小時，或者也可能他是用光速在敲代碼”

CamiloR：“太棒了，很高興核心團(tuán)隊之外，也有人付出如此多的努力”

Carlos：“我就是核心團(tuán)隊的成員 ??”

總結(jié)

不得不感嘆，十倍工程師是真實存在的……這樣一次巨型代碼庫遷移只花了短短幾天時間，其實也體現(xiàn)出作者在 TS 生態(tài)、構(gòu)建以及測試相關(guān)方面的熟悉程度。

感謝 Vue 核心團(tuán)隊成員們夸張的戰(zhàn)斗力，給前端界帶來這么優(yōu)秀的框架而且持續(xù)迭代和優(yōu)化。

Vue 3 雖然是未來，但是 Vue 2 也不會被放棄，遷移到 TS 以后的 Vue 2 具有更強(qiáng)的代碼可移植性，一定會綻放出更多精彩。

最后

點個在看支持我吧，轉(zhuǎn)發(fā)就更好了

參考資料