Typescript tsconfig.json 配置詳解

一、tsconfig.json概述

tsconfig.json是 TypeScript 的配置文件，它包含了 TypeScript 編譯器的一系列選項來控制編譯過程中的行為。通過對 tsconfig.json 進行配置，我們可以讓 TypeScript 直接編譯整個項目，而不需要手動去指定每個 ts 文件。

tsconfig.json 文件格式為 JSON，它是一個包含了編譯選項的對象。在本文中，我們將介紹和解釋最常用的一些選項。

二、tsconfig.json基本配置選項

1. files 和 include

files 和 include 選項告訴編譯器在編譯時需要包含哪些文件，它們都是一個相對於 tsconfig.json 文件的文件列表。

{
  "files": [
    "src/app.ts"
  ],
  "include": [
    "src/**/*"
  ]
}

在上面的示例中，我們讓編譯器只編譯 src/app.ts 文件。然而，我們同樣希望編譯所有其他的 TypeScript 文件，所以我們添加了 include 選項，讓編譯器遞歸地查找 src 目錄下的所有 TypeScript 文件。

2. exclude 和 files.exclude

exclude 和 files.exclude 是排除文件或者文件夾的選項。它們都是一個相對於 tsconfig.json 文件的文件列表。

{
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ],
  "files": [
    "src/app.ts"
  ],
  "files.exclude": [
    "src/image.png"
  ]
}

在上面的示例中，我們告訴編譯器不要包含 node_modules 文件夾和任何以 .spec.ts 結尾的測試文件。此外，我們還使用了 files.exclude 選項來排除一個非 TypeScript 文件。

3. compilerOptions 配置

compilerOptions 配置涵蓋了迄今為止最常見和最重要的 TypeScript 編譯器選項。

3.1 target

target 選項告訴編譯器你想將 TypeScript 編譯成哪個版本的 ECMAScript。默認情況下，TypeScript 會將代碼編譯為最新的 ECMAScript 版本（目前是 ESNext），但你可以將 target 選項設置為 ES5、ES6 或者 ES7 等其他版本。

{
  "compilerOptions": {
    "target": "ES5"
  }
}

在上面的示例中，我們將編譯目標設置為 ES5。

3.2 module

module 選項告訴編譯器你想如何組織生成的 JavaScript 代碼。

{
  "compilerOptions": {
    "module": "commonjs"
  }
}

在上面的示例中，我們將模塊組織方式設置為 CommonJS。你還可以使用其他的模塊組織方式，例如：AMD、UMD 和 ES6 等。

3.3 lib

lib 選項告訴編譯器你需要使用哪些類型庫。

{
  "compilerOptions": {
    "lib": [
      "es6",
      "dom"
    ]
  }
}

在上面的示例中，我們告訴 TypeScript 編譯器我們需要使用 ES6 和 DOM 類型庫。

3.4 sourceMap

sourceMap 選項告訴編譯器是否生成源映射文件。

{
  "compilerOptions": {
    "sourceMap": true
  }
}

在上面的示例中，我們告訴編譯器生成源映射文件。

3.5 outDir 和 rootDir

outDir 選項告訴編譯器將 TypeScript 文件編譯後生成的 JavaScript 文件輸出到哪個目錄。

{
  "compilerOptions": {
    "outDir": "build"
  }
}

在上面的示例中，我們告訴編譯器將生成的 JavaScript 文件輸出到 build 目錄。

rootDir 選項告訴編譯器你的源 TypeScript 文件放在哪個目錄。

{
  "compilerOptions": {
    "rootDir": "src"
  }
}

在上面的示例中，我們告訴編譯器 TypeScript 文件放在 src 目錄。

3.6 strict

strict 選項是一個組合選項，它啟用了 TypeScript 的所有嚴格類型檢查選項。

{
  "compilerOptions": {
    "strict": true
  }
}

在上面的示例中，我們啟用了 TypeScript 的所有嚴格類型檢查選項。

四、總結

tsconfig.json 文件是 TypeScript 編譯器的配置文件。本文介紹了一些常用的選項。