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