翻譯：瘋狂的技術宅
javascript
做者：Dr. Axel Rauschmayer
html
來源：2ality前端
正文共：1526 字java
預計閱讀時間：7 分鐘web
本文概述了將代碼庫從 JavaScript 遷移到 TypeScript 的策略。還提到了須要進一步閱讀的材料。面試
三種遷移策略
這是用於遷移到TypeScript的三種策略：正則表達式
對於咱們的代碼庫，能夠支持 JavaScript 和 TypeScript 文件的混合。咱們僅從 JavaScript 文件開始，而後將愈來愈多的文件切換到 TypeScript。typescript
咱們能夠繼續使用普通的 JavaScript，並經過 JSDoc 註釋添加類型信息，直到所有完成爲止。這時咱們就能夠切換到 TypeScript。json
對於大型項目，在遷移過程當中可能會遇到太多 TypeScript 錯誤。針對錯誤的快照進行測試會有所幫助。微信
更多信息：
TypeScript 手冊中的「從 JavaScript 遷移」 (https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
策略1：JavaScript/TypeScript 混合代碼庫
若是咱們用編譯器選項 --allowJs，則 TypeScript 編譯器支持 JavaScript 和 TypeScript 文件的混合：
TypeScript 文件被編譯。
將 JavaScript 文件簡單地複製到輸出目錄中（通過一些簡單的類型檢查以後）。
首先，只有 JavaScript 文件。而後咱們一個接一個地將文件切換到 TypeScript。在這樣作的同時，咱們的代碼庫也在不斷的被編譯。
這是 tsconfig.json 的樣子：
1{
2 "compilerOptions": {
3 ···
4 "allowJs": true
5 }
6}
更多信息：
Clay Allsopp 寫的「逐步將 JavaScript 遷移到 TypeScript」 (https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88)
策略2：將類型信息添加到純 JavaScript 文件
這個方法的工做方式以下：
咱們將繼續使用當前的構建架構。
咱們運行 TypeScript 編譯器，但僅做爲類型檢查器（編譯器選項
--noEmit）實用。經過 JSDoc 註釋（請參見下面的示例）和類型定義文件添加類型信息。
一旦 TypeScript 的類型檢查器再也不報錯，咱們將用編譯器來構建代碼庫（相似於先前的策略）。如今不急着從
.js文件切換到.ts文件，由於整個代碼庫已經徹底有了靜態類型。如今咱們甚至能夠生成類型文件（文件擴展名爲.d.ts）。
如下是經過 JSDoc 註釋爲普通 JavaScript 指定靜態類型的方式：
1/**
2 * @param {number} x - A number param.
3 * @param {number} y - A number param.
4 * @returns {number} This is the result
5 */
6function add(x, y) {
7 return x + y;
8}
9/** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */
10/** @typedef {(data: string, index?: number) => boolean} Predicate */
更多信息：
TypeScript 手冊中的「對 JavaScript 文件進行類型檢查」 (https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html)
Oliver Joseph Ash 寫的 「咱們是如何逐步平穩的遷移到 TypeScript 的」 (https://medium.com/unsplash/how-we-gradually-migrated-to-typescript-at-unsplash-7a34caa24ef1)
策略3：經過快照測試 TypeScript 錯誤遷移大型項目
在大型 JavaScript 項目中，不管咱們選擇哪一種方法，切換到 TypeScript 均可能會產生大量錯誤。能夠選擇快照測試 TypeScript 錯誤：
咱們第一次在整個代碼庫上運行編譯器。
TypeScript 編譯器產生的錯誤成爲咱們的初始快照。
在的代碼上工做時，咱們將新的錯誤輸出與之前的快照進行比較：有時錯誤消失了。而後就能夠建立一個新的快照。有時會出現新的錯誤。此時咱們要麼必須糾正此錯誤（若是能夠），要麼建立一個新的快照。
更多信息：
Dylan Vann 提出的「如何遞增地將10萬行代碼遷移到Typescript」 (https://dylanvann.com/incrementally-migrating-to-typescript/)
結論
咱們快速學習了各類遷移到 TypeScript 的策略。另外還有兩個提示：
先實驗性的進行遷移：在你的代碼庫上嘗試各類方法，而後選擇其中的一種。
而後爲下一步制定清晰的計劃。須要與你的團隊交流優先順序：
有時可能須要優先完成快速遷移。
有時，在遷移過程當中保持完整功能的代碼可能具備優先權。
等等…
當你把代碼庫從 JavaScript 遷移到 TypeScript 時都經歷些什麼？請在評論中告訴你們！
原文連接
https://2ality.com/2020/04/migrating-to-typescript.html
長按二維碼，加大鵬老師微信好友
拉你加入前端技術交流羣
嘮一嘮怎樣才能拿高薪
✎往期精彩回顧
本文分享自微信公衆號 - 前端先鋒（jingchengyideng）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。