TypeScript 前端專案的漸進採用策略

在前端專案中逐步採用 TypeScript 的策略通常包括：

介紹 TypeScript

如果我們有一個簡單的 JavaScript 模組 utils.js，其中包含一個計算兩個數字總和的函數：

// utils.js
export function add(a, b) {
    return a + b;
}

首先，我們將檔案副檔名變更為.ts，並開始逐步新增類型註解：

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

設定 tsconfig.json

在專案根目錄下建立tsconfig.json，用於設定TypeScript編譯器：

{
// Specify the target ECMAScript version for compilation
"target": "es6",

// Specify the module system
"module": "esnext",

// Output directory, where the compiled files are stored
"outDir": "./dist",

// Whether to include source map files for debugging
"sourceMap": true,

// Enable strict type checking options
"strict": true,

// Allow default imports from modules that do not set default exports
"esModuleInterop": true,

// Ignore type checking for libraries
"skipLibCheck": true,

// Ensure consistent case for file names
"forceConsistentCasingInFileNames": true,

// Which files to include for compilation
"include": [
    "src/**/*.ts",
    "src/**/*.tsx" // If TypeScript's JSX is used in the project
],

// Which files or directories are excluded from compilation
"exclude": [
    "node_modules",
    "**/*.spec.ts" // Exclude test files
]
}

高階設定項

paths：用於路徑別名配置，方便導入模組時的路徑管理。

"paths": {
    "@components/*": ["src/components/*"]
}

baseUrl：設定專案的基底目錄。與路徑一起使用時，可以提供更簡潔的導入路徑。

    "baseUrl": "./src"

resolveJsonModule：允許直接匯入 JSON 檔案。

    "resolveJsonModule": true

lib：指定專案中使用的函式庫檔案集合，如ECMAScript、DOM等

    "lib": ["es6", "dom"]

jsx：如果專案使用JSX語法，則需要設定此選項

    "jsx": "react-jsx"

繼承配置

如果你的專案結構比較複雜，你可能需要在不同的目錄下進行不同的配置。可以使用extends屬性繼承一個基本的tsconfig.json：

// tsconfig.app.json in a subdirectory
{
    "extends": "../tsconfig.json",
    "compilerOptions": {
    // You can override or add application-specific compilation options here
    },
    // You can add or modify include and exclude here
}

將 TypeScript 整合到建置過程中

將 TypeScript 整合到建置過程中通常涉及調整建置工具（例如 Webpack、Rollup 或 Parcel）的配置。並在設定檔中新增TypeScript處理規則。

npm install --save-dev typescript ts-loader webpack webpack-cli

webpack.config.js 設定檔

const path = require('path');

module.exports = {
  entry: './src/index.ts', // Your entry file, usually index.ts
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // Add .ts and .tsx extensions
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/, // Exclude the node_modules directory
      },
    ],
  },
  devtool: 'source-map', // Generate source map for easy debugging during development
};

在 tsconfig.json 中，請確保您已配置正確的 outDir 以符合 Webpack 的輸出目錄：

{
  // ...
  "outDir": "./dist",
  // ...
}

現在您可以透過從命令列執行以下命令來啟動建置程序：

npx webpack

這將使用 Webpack 和 ts-loader 將 TypeScript 原始碼編譯為 JavaScript，並將其輸出到 dist 目錄。

如果您使用 npm 腳本，可以將建置腳本新增至 package.json：

{
  "scripts": {
    "build": "webpack"
  }
}

然後透過 npm run build 運行建置。

使用類型定義

如果您的專案中使用了第三方程式庫，請確保安裝相應的類型定義包，例如@types/lodash。對於沒有官方類型定義的程式庫，您可以嘗試社群提供的定義或編寫自己的聲明文件。

1.安裝類型定義包：

大多數流行的庫都有相應的類型定義包，通常位於@types命名空間中。例如，如果您在專案中使用 lodash，則可以執行以下命令來安裝其類型定義：

// utils.js
export function add(a, b) {
    return a + b;
}

或使用紗線：

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

2. 自動類型推斷

安裝類型定義後，TypeScript 編譯器將自動識別並使用這些類型定義。您不需要在程式碼中明確匯入它們，只需在專案中正常引用該庫即可。

3. 自訂類型定義

如果您使用的函式庫沒有官方類型定義，或者官方類型定義不完整，您可以編寫自己的類型聲明文件（.d.ts）。通常，此檔案應放置在與程式庫的 JavaScript 檔案相同的位置，或放置在 types 或 @types 目錄中。

例如，假設有一個名為customLib的函式庫，它的主檔案是customLib.js。您可以建立一個 customLib.d.ts 檔案來聲明其類型：

{
// Specify the target ECMAScript version for compilation
"target": "es6",

// Specify the module system
"module": "esnext",

// Output directory, where the compiled files are stored
"outDir": "./dist",

// Whether to include source map files for debugging
"sourceMap": true,

// Enable strict type checking options
"strict": true,

// Allow default imports from modules that do not set default exports
"esModuleInterop": true,

// Ignore type checking for libraries
"skipLibCheck": true,

// Ensure consistent case for file names
"forceConsistentCasingInFileNames": true,

// Which files to include for compilation
"include": [
    "src/**/*.ts",
    "src/**/*.tsx" // If TypeScript's JSX is used in the project
],

// Which files or directories are excluded from compilation
"exclude": [
    "node_modules",
    "**/*.spec.ts" // Exclude test files
]
}

然後在您的程式碼中，TypeScript 將識別並使用這些類型。

4. 社區類型定義

有時，社群會提供非官方的類型定義。您可以在DefinitelyTyped儲存庫（https://github.com/DefinitelyTyped/DefinitelyTyped）中找到它，或在GitHub上搜尋@types/library-name。

5. 類型定義的限制

雖然類型定義有助於提高程式碼質量，但並非所有庫都提供完整的類型定義，或者它們可能與庫的實際行為不完全匹配。在這種情況下，您可能需要在程式碼中使用 any type 或 // @ts-ignore 註解來跳過特定類型檢查。

IDE集成

確保您的 IDE（例如 VSCode）安裝了 TypeScript 插件，以取得程式碼補全、類型檢查和其他功能。

逐步遷移其他模組

隨著時間的推移，您可以逐漸將其他 JavaScript 模組轉換為 TypeScript。例如，假設有一個app.js，可以類似地轉換為app.ts並添加類型註釋。

• 將 app.js 重新命名為 app.ts。這一步標誌著模組正式進入TypeScript環境。

• 開啟 app.ts 並開始為變數、函數參數、傳回值等新增型別註解。這有助於 TypeScript 編譯器執行類型檢查並減少潛在的類型錯誤。
  

// utils.js
export function add(a, b) {
    return a + b;
}

• 對於複雜的資料結構，可以考慮使用介面（interface）或類型別名（typealias）來定義類型，以提高程式碼的可讀性和可維護性。

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

加強型式檢查

當您的團隊習慣了 TypeScript 後，您可以逐漸在 tsconfig.json 中啟用更嚴格的類型檢查選項，例如 strictNullChecks。

以上是TypeScript 前端專案的漸進採用策略的詳細內容。更多資訊請關注PHP中文網其他相關文章！