如今，越來越多的項(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è)過程可能需要很長(zhǎng)時(shí)間。

（2) 整體遷移： 將 JavaScript 或部分 TypeScript 項(xiàng)目并將其完全轉(zhuǎn)換。需要添加一些 any類型和@ts-ignore注釋，以便項(xiàng)目編譯無誤，但隨著時(shí)間的推移，可以用更具描述性的類型替換它們。這種策略的優(yōu)勢(shì)如下：

• 跨項(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 的目的是通過簡(jiǎn)單地忽略所有錯(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í)行以下操作：

1. 解析 tsconfig.json。
2. 創(chuàng)建 .ts 文件。
3. 將每個(gè)文件發(fā)送到 TypeScript 語言服務(wù)器進(jìn)行診斷。編譯器提供了三種類型的診斷：semanticDiagnostics、syntacticDiagnostics 和 suggestionDiagnostics。使用這些診斷來查找源代碼中有問題的地方?；谖ㄒ坏脑\斷代碼和行號(hào)，可以識(shí)別問題的潛在類型并應(yīng)用必要的代碼修改。
4. 在每個(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)行很好的自定義?？梢蕴砑痈嗖寮斫鉀Q諸如類型質(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。