將 30 萬行代碼從 Flow 遷移到 TypeScript 是一種怎樣的體驗？

作者 | Roger Goldfinger

譯者 | 彎月

責編 | 伍杏玲

出品 | CSDN（ID：CSDNnews）

【CSDN 編者按】本文作者在當前正在使用 Flow 下，想一次性切換到TypeScript，涉及30萬行代碼，他們遷移的過程值得我們借鑑：先合併TypeScript工具，再反覆進行練習，成功在12分鐘內成功通過CI流程，並最後修復錯誤。

我們公司一直致力於改善開發人員的工作體驗。在使用Flow度過了兩年愉快的開發時光後，最近我們決定轉而採用TypeScript，因為TypeScript有良好的社區支持、好的編輯體驗、支持的類型也更多。

於是，我們決定一次性把Flow轉成TypeScript。

我們使用自動轉換工具遷移了2,700個Javascript文件，並在12分鐘內成功通過CI流程，接下來我們立刻就能享受新語言帶來的優勢了。與逐步遷移相比，（這樣做）我們省卻了大量的操作複雜性，並最大限度地減輕了給工程團隊帶來的負擔和影響。在經過了一週的TypeScript學習後，軟件工程師們再次重回崗位，開始了更為迅速地開發作業。

為何做出這種改變？

在過去的兩年中，我們一直在使用Flow來處理我們Javascript代碼中的類型。我們有40名工程師負責開發Web代碼，良好的類型系統可以確保代碼的正確性、加快新來工程師的適應速度，且有助於安全的重構。當時，Flow是一個正確的選擇，逐步採用支持意味著我們可以慢慢適應。

最近隨著TypeScript的崛起，越來越多的人選擇TypeScript，我們也仔細研究了我們使用的Flow。一直以來我們都知道，Flow與編輯器的集成有時非常緩慢，而且應用程序的核心部分（比如Redux狀態和組件props）並沒有添加有意義的類型，部分原因是Flow對redux和reselect的typedef支持有問題。由於相應的Flow類型庫的維護者已經很長時間沒有更新了，所以我們也擔心Flow的未來。

在開始接觸TypeScript後，我們驚人地發現VSCode對該編輯器的支持非常好，而且還有很多非常有幫助的錯誤消息，此外社區的支持也很給力。再加上其他流行的代碼庫和項目，讓我們欣喜若狂，我們越發肯定這是正確的方向。

實際的代碼遷移過程

遷移近30萬行的代碼，這個工作量似乎超出了手動的承受範圍，所以我們決定一次性轉換整個代碼庫，使用babel插件完成語法的修改，再通過一個腳本重命名文件。

我們考慮過逐步遷移，一次將一個文件遷移到TypeScript中。為了在遷移期間保留跨語言的類型，我們可以輸出兩種語言的定義文件，然後生成這些定義文件到另一種語言的轉換。最終，我們擔心這種方法過於複雜，工程師必須掌握代碼庫中兩種不同的語言，並且遷移可能需要很長時間，這個過程通常還會增加現有工作的複雜性。

為了準備大規模遷移，首先我們合併了TypeScript工具，例如配置Babel和設置ESLint。我們一遍又一遍地反覆練習遷移的過程，練習快速地可靠地讓轉換後的代碼庫通過CI流程，並在運行手冊上記錄了這個過程。

到最後的時候，我們能夠在12分鐘內完成所有的代碼遷移，並執行完所有的手動步驟通過CI流程。這確保我們能夠最大限度地減少對工程師現有工作的干擾，並確保我們有時間解決意外發生的問題。

最後，在我們約定好的那一天，我們快速凍結了代碼庫，然後執行了手冊上的所有步驟，對這些變更進行了一些手動測試，並將代碼合併到了生產中。

修復錯誤

當然，遷移到TypeScript中的代碼庫存在很多錯誤（大約有6千多個），我們決定暫且通過註釋// @ ts-ignore忽略這些錯誤，先通過CI流程再說。畢竟，Flow的類型覆蓋沒有捕獲到這些錯誤。只有忽略這些錯誤，我們才能夠一次性地完成遷移，而無需在修復錯誤的過程中凍結整個代碼庫。

我們編寫了一個腳本，自動將// @ ts-ignore註釋插入到我們的大多數代碼中，同時保證這些忽略掉的都是因為JSX過於複雜。於是，我們的JSX中殘留了大約1,400個錯誤，在接下來的一週裡，我們每個人都動手修復這些錯誤。這為我們每個人提供了一次很好的學習TypeScript的機會，在修復剩餘錯誤的過程中，我們熟悉了類型系統和最佳實踐。

遷移成功

總體而言，此次代碼遷移非常成功。我們將類型覆蓋率從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 翻譯，轉載請註明來源出處。

【END】