神器，快速將JavaScript遷移到TypeScript！
如今，越來越多的項目將 JavaScript 代碼遷移到 TypeScript，TS 是一種靜態類型語言，能夠提高項目的可讀性、可維護性和健壯性。然而，大規模遷移是一項復雜的任務，從 JavaScript 遷移到 TypeScript 有兩種選擇：
（1）混合遷移： 逐個文件遷移，修復類型錯誤，然后重復，直到遷移完整項目。allowJS 配置選項允許 TypeScript 和 JavaScript文件同時存于項目中，這使得這種方法成為可能！在混合遷移策略中，不必暫停開發，可以逐個文件逐步遷移。雖然，在大規模項目上，這個過程可能需要很長時間。
（2) 整體遷移： 將 JavaScript 或部分 TypeScript 項目并將其完全轉換。需要添加一些 any類型和@ts-ignore注釋，以便項目編譯無誤，但隨著時間的推移，可以用更具描述性的類型替換它們。這種策略的優勢如下：
- 跨項目的一致性： 整體遷移將保證每個文件的狀態相同，無需記住可以在何處使用 TypeScript 功能以及編譯器將在何處防止基本錯誤。
- 只修復一種類型比修復文件容易得多： 修復整個文件可能非常復雜，因為文件可能有多個依賴項。使用混合遷移，很難跟蹤遷移的實際進度和文件的狀態。
看起來整體遷移在這里更勝一籌。但是，對大型成熟代碼庫執行全面遷移的過程是一個復雜的問題。為此，Airbnb 開源了一個工具幫助將代碼遷移到 TypeScript 的工具：ts-migrate：
ts-migrate 接受一個 JavaScript 或部分 TypeScript 項目，并給出一個編譯 TypeScript 項目，下面就來看看這個工具是如何使用的！
概述
ts-migrate 分為 3 個包：
- ts-migrate
- ts-migrate-server
- ts-migrate-plugins
這樣就能夠將轉換邏輯與核心運行器分開，并為不同的目的創建多個配置。目前有兩個主要配置：migration 和 reignore。雖然遷移配置的目標是從 JavaScript 遷移到 TypeScript，但 reignore 的目的是通過簡單地忽略所有錯誤使項目可編譯。當代碼庫很大并且正在執行以下任務時，Reignore 很有用：
- 升級 TypeScript 版本
- 對代碼庫進行重大更改或重構
- 改進一些常用庫的類型
這樣，即使有一些不想立即處理的錯誤，也可以遷移項目。它使 TypeScript 或庫的更新變得更加容易。
這兩個配置都在 ts-migrate-server 上運行，它由兩部分組成：
- TSServer：與 VSCode 編輯器為編輯器和語言服務器之間的通信所做的非常相似。TypeScript 語言服務器的新實例作為單獨的進程運行，開發工具使用語言協議與服務器通信。
- Migration runner：運行并協調遷移過程。它需要以下參數：
interface MigrateParams {
rootDir: string; // 根目錄的路徑
config: MigrateConfig; // 遷移配置，包括插件列表
server: TSServer; // TSServer 分支的一個實例
}它會執行以下操作：
- 解析 tsconfig.json。
- 創建 .ts 文件。
- 將每個文件發送到 TypeScript 語言服務器進行診斷。編譯器提供了三種類型的診斷：semanticDiagnostics、syntacticDiagnostics 和 suggestionDiagnostics。使用這些診斷來查找源代碼中有問題的地方。基于唯一的診斷代碼和行號，可以識別問題的潛在類型并應用必要的代碼修改。
- 在每個文件上運行所有插件。如果文本因插件執行而改變，更新原始文件的內容并通知 TypeScript 語言服務器文件已更改。
通用插件
plugin 都會放在ts-migrate-plugins目錄下。先看兩個基于 jscodeshift 的插件：explicitAnyPlugin 和 declareMissingClassPropertiesPlugin。
explicitAnyPlugin 會對所有文件中的語義診斷錯誤進行處理。對于無法推導類型的變量添加any，可以幫助解決編譯問題。
// 轉化前：
const fn2 = function(p3, p4) {}
const var1 = [];
// 轉化后：
const fn2 = function(p3: any, p4: any) {}
const var1: any = [];declareMissingClassPropertiesPlugin 會找到類申明中缺失的類型，并且添加any修飾。
基本使用
安裝和配置TS
在開始遷移之前，需要安裝和配置 TS：
- 安裝 TS 包：
在開始遷移過程之前，我們必須安裝和配置 TS：- 初始化 TS 配置：
npx tsc --init- 安裝 React 類型（如果使用的是 React）：
npm install --save-dev @types/react注意：init 命令將創建一個 tsconfig.json 文件。可以根據要求對其進行修改。
將 JS 文件轉換為 TS
這里就實用上面說的 ts-migrate 工具將 JS 文件遷移到 TS：
- 安裝 ts-migrate：
npm install --save-dev ts-migrate- 將 JS 文件重命名為 TS 文件，即將文件后綴從.js/.jsx轉換成.ts/.tsx：
npm run ts-migrate -- rename <project-dir> --sources <specific-dir>- 將JS文件轉換為TS格式：
npm run ts-migrate -- migrate <project-dir> --sources <specific-dir>/file.tsx注意：最好先提交重命名更改，然后再提交轉換為 TS 更改。這樣 Git 將更改識別為 1 個文件而不是 2 個文件（刪除的文件 + 新文件）。
示例
下面來看一個例子，將項目的 src/examples/example.js 轉換為 TS，該文件內容如下：
// wrong-type-assignment
let age = 17;
age = "seventeen";
// assign-to-const
const color = "blue";
color = "red";
// add-conversions
function sum(a, b) {
return a + b;
}
// declare-missing-class-properties
class Point {
distance(point) {
const dx = this.x - point.x;
const dy = this.y - point.y;
return Math.hypot(dx, dy);
}
}可以通過以下命令來重命名 JavaScript 文件：
npm run ts-migrate -- rename ./ --sources ./src/examples這里 --sources ./src/examples 指定了 tsconfig.json 中 sources 的路徑為 ./src/examples。該命令在項目根目錄下運行，通過相對路徑指定需要處理的文件或文件夾。執行完該命令后，src/examples/example.js 就變成了 src/examples/example.ts。
接下來就需要將遷移腳本應用于 example.ts 文件：
npm run ts-migrate -- migrate ./ --sources ./src/examples/example.ts執行完該命令之后，就可以看到一些 ts-migrate 功能：
注意：
- ts-migrate 無法自動修復 TS 問題，它會留下帶有錯誤詳細信息的 @ts-expect-error 注釋。
- 雖然 ts-migrate 在需要的地方將類型放入變量，但仍然需要將 any 類型更改為特定類型。
在運行 ts-migrate 命令時可以添加以下命令：
- init <folder>: 在 <folder> 文件夾中初始化一個 tsconfig.json 文件。
- rename <folder>: 將 <folder> 文件夾中的 JavaScript/JSX 文件重命名為 TypeScript/TSX 文件。
- migrate <folder>: 使用 codemods 修復 <folder> 文件夾中的 TypeScript 錯誤。
- reignore <folder>: 在項目上重新運行 ts-ignore。
這些命令可以傳遞 --sources（或 -s）標志。該標志接受一個字符串路徑（支持 glob 模式），表示項目的子集。當使用此標志時，ts-migrate 忽略默認源文件而使用您列出的文件代替。這實際上相當于將 tsconfig.json 的 include 屬性替換為提供的 sources。此標志可以多次傳遞。
可用的選項包括：
- -h, --help: 顯示幫助信息。
- -i, --init: 在 <folder> 文件夾中創建 tsconfig.json 文件。
- -m, --migrate: 使用 codemods 修復 TypeScript 錯誤。
- -rn, --rename: 將 <folder> 文件夾中的 JavaScript/JSX 文件重命名為 TypeScript/TSX 文件。
- -ri, --reignore: 在項目上重新運行 ts-ignore。
下面是一些示例：
- npm run ts-migrate -- --help: 顯示幫助信息。
- npm run ts-migrate -- init frontend/foo: 在 frontend/foo 文件夾中創建 tsconfig.json 文件。
- npm run ts-migrate -- rename frontend/foo: 將 frontend/foo 文件夾中的 JavaScript/JSX 文件重命名為 TypeScript/TSX 文件。
TS Migrate 被設計為一組插件，因此它可以針對不同的用例進行很好的自定義。可以添加更多插件來解決諸如類型質量改進或與庫相關的事件等問題。用戶可以根據自己的需要添加具有不同插件集的自定義配置。這個工具并不能保證實現完全沒有錯誤的轉換，但在實際使用過程中，對于一個超過 50000 行代碼、1000 個文件的項目，從 JavaScript 轉換到 TypeScript 使用這個工具基本只需 1 天。
ts-migrate：https://github.com/airbnb/ts-migrate。
