本文目錄導(dǎo)讀：

1. 引言
2. 1. 什么是TypeScript嚴(yán)格模式？
3. 2. 從JS遷移到TS的常見(jiàn)問(wèn)題
4. 3. 遷移策略：逐步啟用嚴(yán)格模式
5. 4. 工具與技巧
6. 5. 總結(jié)

隨著前端項(xiàng)目的復(fù)雜度不斷提升,JavaScript（JS）的動(dòng)態(tài)類型特性在大型項(xiàng)目中逐漸顯現(xiàn)出維護(hù)困難、調(diào)試成本高等問(wèn)題，TypeScript（TS）作為JS的超集，通過(guò)靜態(tài)類型檢查提供了更好的代碼可維護(hù)性和開(kāi)發(fā)體驗(yàn)，從JS遷移到TS并非一帆風(fēng)順，尤其是開(kāi)啟嚴(yán)格模式（strict: true）時(shí)，可能會(huì)遇到各種類型錯(cuò)誤和配置問(wèn)題。

本文將詳細(xì)介紹如何正確配置TypeScript的嚴(yán)格模式,并分享從JS遷移到TS的常見(jiàn)問(wèn)題及解決方案，幫助你避開(kāi)遷移過(guò)程中的“坑”。

---

什么是TypeScript嚴(yán)格模式？

TypeScript的嚴(yán)格模式是一組編譯選項(xiàng)的集合,旨在提供更強(qiáng)的類型檢查，減少運(yùn)行時(shí)錯(cuò)誤，在tsconfig.json中，可以通過(guò)"strict": true啟用嚴(yán)格模式，它實(shí)際上是以下所有嚴(yán)格檢查選項(xiàng)的集合：

{
  "compilerOptions": {
    "strict": true,
    // 等同于同時(shí)開(kāi)啟以下選項(xiàng)：
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true
  }
}

1 嚴(yán)格模式的作用

• 減少運(yùn)行時(shí)錯(cuò)誤：通過(guò)編譯時(shí)類型檢查提前發(fā)現(xiàn)問(wèn)題。
• 提高代碼可維護(hù)性：明確的類型定義讓代碼更易讀、易重構(gòu)。
• 增強(qiáng)IDE支持：類型推斷和自動(dòng)補(bǔ)全功能更強(qiáng)大。

---

從JS遷移到TS的常見(jiàn)問(wèn)題

1 隱式any類型（noImplicitAny）

在JS中,變量可以隨意賦值，而TS默認(rèn)會(huì)推斷為any類型，開(kāi)啟noImplicitAny后，TS會(huì)強(qiáng)制要求顯式定義類型。

問(wèn)題示例：

function add(a, b) { // 錯(cuò)誤：參數(shù)'a'和'b'隱式具有'any'類型
  return a + b;
}

解決方案：

function add(a: number, b: number): number {
  return a + b;
}

2 嚴(yán)格的null檢查（strictNullChecks）

JS中null和undefined可以賦值給任何變量，而TS開(kāi)啟strictNullChecks后，必須顯式處理null和undefined。

問(wèn)題示例：

let name: string = null; // 錯(cuò)誤：不能將'null'賦值給'string'

解決方案：

let name: string | null = null; // 明確允許null

3 類屬性初始化（strictPropertyInitialization）

TS要求類的屬性必須在構(gòu)造函數(shù)中初始化,否則會(huì)報(bào)錯(cuò)。

問(wèn)題示例：

class User {
  name: string; // 錯(cuò)誤：屬性'name'沒(méi)有初始化
}

解決方案：

class User {
  name: string = ""; // 提供默認(rèn)值
  // 或
  constructor(name: string) {
    this.name = name;
  }
}

4 函數(shù)參數(shù)類型檢查（strictFunctionTypes）

確保函數(shù)參數(shù)類型嚴(yán)格匹配,防止錯(cuò)誤的類型賦值。

問(wèn)題示例：

type Handler = (arg: string) => void;
const handler: Handler = (arg: number) => {}; // 錯(cuò)誤：參數(shù)類型不匹配

解決方案：

const handler: Handler = (arg: string) => {}; // 正確

---

遷移策略：逐步啟用嚴(yán)格模式

直接開(kāi)啟所有嚴(yán)格選項(xiàng)可能會(huì)導(dǎo)致大量錯(cuò)誤,建議分階段遷移：

1 階段1：基礎(chǔ)類型檢查

• 先關(guān)閉strict，僅啟用noImplicitAny和strictNullChecks。
• 修復(fù)基本類型錯(cuò)誤。

2 階段2：增強(qiáng)類型安全

• 逐步啟用strictFunctionTypes、strictBindCallApply等。
• 確保函數(shù)調(diào)用和this綁定正確。

3 階段3：全面嚴(yán)格模式

• 最終開(kāi)啟strict: true，處理剩余問(wèn)題。

---

工具與技巧

1 使用@ts-check漸進(jìn)遷移

在JS文件中添加// @ts-check，讓TS檢查JS代碼，逐步調(diào)整。

// @ts-check
function greet(name) {
  return "Hello, " + name;
}
greet(123); // TS會(huì)提示類型錯(cuò)誤

2 類型斷言（as）和any臨時(shí)方案

在復(fù)雜場(chǎng)景下,可以暫時(shí)使用as或any繞過(guò)檢查，但應(yīng)盡量避免濫用。

const data = JSON.parse(rawData) as MyType; // 手動(dòng)斷言類型

3 使用declare補(bǔ)充類型

對(duì)于第三方JS庫(kù),可以通過(guò).d.ts文件補(bǔ)充類型定義。

declare module "untyped-lib"; // 聲明模塊類型

---

從JS遷移到TS并啟用嚴(yán)格模式是一個(gè)漸進(jìn)的過(guò)程,可能會(huì)遇到各種類型錯(cuò)誤，但通過(guò)合理的配置和分階段修復(fù)，可以顯著提升代碼質(zhì)量，關(guān)鍵點(diǎn)包括：

1. 分階段啟用嚴(yán)格模式，避免一次性修復(fù)過(guò)多問(wèn)題。
2. 善用類型推斷和顯式類型定義，減少any的使用。
3. 利用工具輔助遷移，如@ts-check和.d.ts聲明文件。

嚴(yán)格模式雖然增加了開(kāi)發(fā)初期的成本,但長(zhǎng)期來(lái)看，它能大幅減少運(yùn)行時(shí)錯(cuò)誤，提高團(tuán)隊(duì)協(xié)作效率，希望本文能幫助你順利遷移到TypeScript，并避開(kāi)常見(jiàn)的“坑”！