2024-04-18 tsconfig.json 常用的配置項作用

哎呦你可棒棒了發表於2024-04-18
JSON

TypeScript 編譯器的配置檔案，用於指定編譯 TypeScript 程式碼時的編譯選項和編譯目標等資訊。

透過修改該檔案，可以定製 TypeScript 編譯器的行為，例如指定編譯目標、啟用或禁用特定的語言特性、設定程式碼檢查規則等。以下是一些常用的配置項及其作用：

　　

　　compilerOptions：編譯器選項。這裡包含了眾多配置，用於定製 TypeScript 的編譯行為。

  • target：指定 ECMAScript 的目標版本。例如 "ES3"（預設）、"ES5"、"ES2015"、"ES2016"、"ES2017"、"ES2018"、"ES2019"、"ES2020"、"ESNEXT" 等。
  • module：指定模組系統型別。如 "commonjs"、"amd"、"system"、"umd"、"es2015"、"esnext" 等。
  • strict：啟用所有嚴格型別檢查選項。
  • jsx：指定 JSX 程式碼如何被編譯。例如 "preserve"、"react"、"react-native" 等。
  • outDir：重定向結構到輸出目錄。
  • rootDir：使用來作為輸出目錄結構根的目錄。
  • lib：包含要包含在編譯中的庫列表。
  • esModuleInterop：允許預設匯入從 CommonJS 模組工作。
  • allowJs：允許編譯 JavaScript 檔案。
  • declaration：生成相應的 .d.ts 檔案。
  • sourceMap：生成 source maps。
  • outFile：將多個檔案合併成一個檔案。
  • noImplicitAny：在表示式和宣告上有隱含的 any 型別時報錯。
  • strictNullChecks：啟用嚴格的 null 檢查。
  • experimentalDecorators：啟用裝飾器。
  • path：允許你指定編譯器在解析模組時使用的路徑別名。
    • 它可以簡化模組匯入的路徑，避免使用相對路徑或長路徑
    • 如你要匯入../Cart/Product/ProductDetail.ts檔案，可以透過給path設定一個變數@Cart,使用@Cart/ProductDetail.ts就可以縮短匯入的路徑，從而減少出錯。

  1. include：用來指定哪些 .ts、.tsx 或 .d.ts 檔案需要被編譯。如果不指定，則預設當前目錄下除了 exclude 之外的所有 .ts、.d.ts、.tsx 檔案都會被編譯。

  2. exclude：指定不需要被編譯的目錄或檔案。

  3. files：指定需要編譯的檔案的列表。只有當需要編譯的檔案較少時才會用到，通常直接使用 include 指定資料夾。

  4. references：用於指定專案之間的引用關係。

  5. extends：指定一個其他 tsconfig.json 檔案路徑，來繼承這個配置檔案裡的配置，繼承檔案的配置會覆蓋當前檔案定義的配置。

程式碼示例：

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "esnext",
    "sourceMap": true,
    "baseUrl": ".",
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "strict": true,
    "paths": {
      "@Cart/*": ["src/product/*"],
    }
  },
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "tslint:latest",
    "tslint-config-prettier"
  ]
}

相關文章