用什麼策略把你的 JavaScript 遷移到 TypeScript

做者：Dr. Axel Rauschmayer

翻譯：瘋狂的技術宅

原文：https://2ality.com/2020/04/mi...

未經容許嚴禁轉載

本文概述了將代碼庫從 JavaScript 遷移到 TypeScript 的策略。還提到了須要進一步閱讀的材料。

---

三種遷移策略

這是用於遷移到TypeScript的三種策略：

• 對於咱們的代碼庫，能夠支持 JavaScript 和 TypeScript 文件的混合。咱們僅從 JavaScript 文件開始，而後將愈來愈多的文件切換到 TypeScript。
• 咱們能夠繼續使用普通的 JavaScript，並經過 JSDoc 註釋添加類型信息，直到所有完成爲止。這時咱們就能夠切換到 TypeScript。
• 對於大型項目，在遷移過程當中可能會遇到太多 TypeScript 錯誤。針對錯誤的快照進行測試會有所幫助。

更多信息：

• TypeScript 手冊中的「從 JavaScript 遷移」

策略1：JavaScript/TypeScript 混合代碼庫

若是咱們用編譯器選項 --allowJs，則 TypeScript 編譯器支持 JavaScript 和 TypeScript 文件的混合：

• TypeScript 文件被編譯。
• 將 JavaScript 文件簡單地複製到輸出目錄中（通過一些簡單的類型檢查以後）。

首先，只有 JavaScript 文件。而後咱們一個接一個地將文件切換到 TypeScript。在這樣作的同時，咱們的代碼庫也在不斷的被編譯。

這是 tsconfig.json 的樣子：

{
  "compilerOptions": {
    ···
    "allowJs": true
  }
}

更多信息：

• Clay Allsopp 寫的 「逐步將 JavaScript 遷移到 TypeScript」

策略2：將類型信息添加到純 JavaScript 文件

這個方法的工做方式以下：

• 咱們將繼續使用當前的構建架構。
• 咱們運行 TypeScript 編譯器，但僅做爲類型檢查器（編譯器選項 --noEmit）實用。
• 經過 JSDoc 註釋（請參見下面的示例）和類型定義文件添加類型信息。
• 一旦 TypeScript 的類型檢查器再也不報錯，咱們將用編譯器來構建代碼庫（相似於先前的策略）。如今不急着從 .js 文件切換到 .ts 文件，由於整個代碼庫已經徹底有了靜態類型。如今咱們甚至能夠生成類型文件（文件擴展名爲 .d.ts）。

如下是經過 JSDoc 註釋爲普通 JavaScript 指定靜態類型的方式：

/**
 * @param {number} x - A number param.
 * @param {number} y - A number param.
 * @returns {number} This is the result
 */
function add(x, y) {
  return x + y;
}
/** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */
/** @typedef {(data: string, index?: number) => boolean} Predicate */

更多信息：

• TypeScript 手冊中的「對 JavaScript 文件進行類型檢查」
• Oliver Joseph Ash 寫的 「咱們是如何逐步平穩的遷移到 TypeScript 的」

策略3：經過快照測試 TypeScript 錯誤遷移大型項目

在大型 JavaScript 項目中，不管咱們選擇哪一種方法，切換到 TypeScript 均可能會產生大量錯誤。能夠選擇快照測試 TypeScript 錯誤：

• 咱們第一次在整個代碼庫上運行編譯器。
• TypeScript 編譯器產生的錯誤成爲咱們的初始快照。
• 在的代碼上工做時，咱們將新的錯誤輸出與之前的快照進行比較：有時錯誤消失了。而後就能夠建立一個新的快照。有時會出現新的錯誤。此時咱們要麼必須糾正此錯誤（若是能夠），要麼建立一個新的快照。

更多信息：

• Dylan Vann 提出的「如何遞增地將10萬行代碼遷移到Typescript」

結論

咱們快速學習了各類遷移到 TypeScript 的策略。另外還有兩個提示：

• 先實驗性的進行遷移：在你的代碼庫上嘗試各類方法，而後選擇其中的一種。

• 而後爲下一步制定清晰的計劃。須要與你的團隊交流優先順序：

  • 有時可能須要優先完成快速遷移。
  • 有時，在遷移過程當中保持完整功能的代碼可能具備優先權。
  • 等等...

當你把代碼庫從 JavaScript 遷移到 TypeScript 時都經歷些什麼？請在評論中告訴你們！

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...