在前端專案中逐步採用 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，用於設定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 整合到建置過程中通常涉及調整建置工具（例如 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。對於沒有官方類型定義的程式庫，您可以嘗試社群提供的定義或編寫自己的聲明文件。
大多數流行的庫都有相應的類型定義包，通常位於@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;
}
安裝類型定義後，TypeScript 編譯器將自動識別並使用這些類型定義。您不需要在程式碼中明確匯入它們，只需在專案中正常引用該庫即可。
如果您使用的函式庫沒有官方類型定義，或者官方類型定義不完整，您可以編寫自己的類型聲明文件（.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 將識別並使用這些類型。
有時，社群會提供非官方的類型定義。您可以在DefinitelyTyped儲存庫（https://github.com/DefinitelyTyped/DefinitelyTyped）中找到它，或在GitHub上搜尋@types/library-name。
雖然類型定義有助於提高程式碼質量，但並非所有庫都提供完整的類型定義，或者它們可能與庫的實際行為不完全匹配。在這種情況下，您可能需要在程式碼中使用 any type 或 // @ts-ignore 註解來跳過特定類型檢查。
確保您的 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;
}
// utils.ts
export function add(a: number, b: number): number {
return a + b;
}
當您的團隊習慣了 TypeScript 後，您可以逐漸在 tsconfig.json 中啟用更嚴格的類型檢查選項，例如 strictNullChecks。
以上是TypeScript 前端專案的漸進採用策略的詳細內容。更多資訊請關注PHP中文網其他相關文章！
