如今，越來越多的項目將 JavaScript 代碼遷移到 TypeScript，TS 是一種靜態(tài)類型語言，能夠提高項目的可讀性、可維護(hù)性和健壯性。然而，大規(guī)模遷移是一項復(fù)雜的任務(wù)，從 JavaScript 遷移到 TypeScript 有兩種選擇：

（1）混合遷移： 逐個文件遷移，修復(fù)類型錯誤，然后重復(fù)，直到遷移完整項目。allowJS 配置選項允許 TypeScript 和 JavaScript文件同時存于項目中，這使得這種方法成為可能！在混合遷移策略中，不必暫停開發(fā)，可以逐個文件逐步遷移。雖然，在大規(guī)模項目上，這個過程可能需要很長時間。

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

• 跨項目的一致性： 整體遷移將保證每個文件的狀態(tài)相同，無需記住可以在何處使用 TypeScript 功能以及編譯器將在何處防止基本錯誤。
• 只修復(fù)一種類型比修復(fù)文件容易得多： 修復(fù)整個文件可能非常復(fù)雜，因為文件可能有多個依賴項。使用混合遷移，很難跟蹤遷移的實際進(jìn)度和文件的狀態(tài)。

看起來整體遷移在這里更勝一籌。但是，對大型成熟代碼庫執(zhí)行全面遷移的過程是一個復(fù)雜的問題。為此，Airbnb 開源了一個工具幫助將代碼遷移到 TypeScript 的工具：ts-migrate：

ts-migrate 接受一個 JavaScript 或部分 TypeScript 項目，并給出一個編譯 TypeScript 項目，下面就來看看這個工具是如何使用的！

概述

ts-migrate 分為 3 個包：

• ts-migrate
• ts-migrate-server
• ts-migrate-plugins

這樣就能夠?qū)⑥D(zhuǎn)換邏輯與核心運(yùn)行器分開，并為不同的目的創(chuàng)建多個配置。目前有兩個主要配置：migration 和 reignore。雖然遷移配置的目標(biāo)是從 JavaScript 遷移到 TypeScript，但 reignore 的目的是通過簡單地忽略所有錯誤使項目可編譯。當(dāng)代碼庫很大并且正在執(zhí)行以下任務(wù)時，Reignore 很有用：

• 升級 TypeScript 版本
• 對代碼庫進(jìn)行重大更改或重構(gòu)
• 改進(jìn)一些常用庫的類型

這樣，即使有一些不想立即處理的錯誤，也可以遷移項目。它使 TypeScript 或庫的更新變得更加容易。

這兩個配置都在 ts-migrate-server 上運(yùn)行，它由兩部分組成：

• TSServer：與 VSCode 編輯器為編輯器和語言服務(wù)器之間的通信所做的非常相似。TypeScript 語言服務(wù)器的新實例作為單獨的進(jìn)程運(yùn)行，開發(fā)工具使用語言協(xié)議與服務(wù)器通信。
• Migration runner：運(yùn)行并協(xié)調(diào)遷移過程。它需要以下參數(shù)：

interface MigrateParams {
  rootDir: string;          // 根目錄的路徑  
  config: MigrateConfig;    // 遷移配置，包括插件列表
  server: TSServer;         // TSServer 分支的一個實例
}

它會執(zhí)行以下操作：

1. 解析 tsconfig.json。
2. 創(chuàng)建 .ts 文件。
3. 將每個文件發(fā)送到 TypeScript 語言服務(wù)器進(jìn)行診斷。編譯器提供了三種類型的診斷：semanticDiagnostics、syntacticDiagnostics 和 suggestionDiagnostics。使用這些診斷來查找源代碼中有問題的地方?；谖ㄒ坏脑\斷代碼和行號，可以識別問題的潛在類型并應(yīng)用必要的代碼修改。
4. 在每個文件上運(yùn)行所有插件。如果文本因插件執(zhí)行而改變，更新原始文件的內(nèi)容并通知 TypeScript 語言服務(wù)器文件已更改。

通用插件

plugin 都會放在ts-migrate-plugins目錄下。先看兩個基于 jscodeshift 的插件：explicitAnyPlugin 和 declareMissingClassPropertiesPlugin。

explicitAnyPlugin 會對所有文件中的語義診斷錯誤進(jìn)行處理。對于無法推導(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 會找到類申明中缺失的類型，并且添加any修飾。

基本使用

安裝和配置TS

在開始遷移之前，需要安裝和配置 TS：

• 安裝 TS 包：

在開始遷移過程之前，我們必須安裝和配置 TS：

• 初始化 TS 配置：

npx tsc --init

• 安裝 React 類型（如果使用的是 React）：

npm install --save-dev @types/react

注意：init 命令將創(chuàng)建一個 tsconfig.json 文件。可以根據(jù)要求對其進(jìn)行修改。

將 JS 文件轉(zhuǎn)換為 TS

這里就實用上面說的 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  --sources 

• 將JS文件轉(zhuǎn)換為TS格式：

npm run ts-migrate -- migrate  --sources /file.tsx

注意：最好先提交重命名更改，然后再提交轉(zhuǎn)換為 TS 更改。這樣 Git 將更改識別為 1 個文件而不是 2 個文件（刪除的文件 + 新文件）。

示例

下面來看一個例子，將項目的 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。該命令在項目根目錄下運(yùn)行，通過相對路徑指定需要處理的文件或文件夾。執(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 無法自動修復(fù) TS 問題，它會留下帶有錯誤詳細(xì)信息的 @ts-expect-error 注釋。
• 雖然 ts-migrate 在需要的地方將類型放入變量，但仍然需要將 any 類型更改為特定類型。

在運(yùn)行 ts-migrate 命令時可以添加以下命令：

• init : 在  文件夾中初始化一個 tsconfig.json 文件。
• rename : 將  文件夾中的 JavaScript/JSX 文件重命名為 TypeScript/TSX 文件。
• migrate : 使用 codemods 修復(fù)  文件夾中的 TypeScript 錯誤。
• reignore : 在項目上重新運(yùn)行 ts-ignore。

這些命令可以傳遞 --sources（或 -s）標(biāo)志。該標(biāo)志接受一個字符串路徑（支持 glob 模式），表示項目的子集。當(dāng)使用此標(biāo)志時，ts-migrate 忽略默認(rèn)源文件而使用您列出的文件代替。這實際上相當(dāng)于將 tsconfig.json 的 include 屬性替換為提供的 sources。此標(biāo)志可以多次傳遞。

可用的選項包括：

• -h, --help: 顯示幫助信息。
• -i, --init: 在  文件夾中創(chuàng)建 tsconfig.json 文件。
• -m, --migrate: 使用 codemods 修復(fù) TypeScript 錯誤。
• -rn, --rename: 將  文件夾中的 JavaScript/JSX 文件重命名為 TypeScript/TSX 文件。
• -ri, --reignore: 在項目上重新運(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ìn)行很好的自定義?？梢蕴砑痈嗖寮斫鉀Q諸如類型質(zhì)量改進(jìn)或與庫相關(guān)的事件等問題。用戶可以根據(jù)自己的需要添加具有不同插件集的自定義配置。這個工具并不能保證實現(xiàn)完全沒有錯誤的轉(zhuǎn)換，但在實際使用過程中，對于一個超過 50000 行代碼、1000 個文件的項目，從 JavaScript 轉(zhuǎn)換到 TypeScript 使用這個工具基本只需 1 天。

ts-migrate：https://github.com/airbnb/ts-migrate。

當(dāng)前題目：神器，快速將JavaScript遷移到TypeScript！
鏈接地址：http://uogjgqi.cn/article/cdcjgps.html