TypeScript - tsconfig.json 檔案

---

---

TypeScript 的 `tsconfig.json` 檔案是一個配置檔案，用於指定編譯器選項。這些編譯器選項用於編譯 TypeScript 程式碼並將其轉換為 JavaScript 程式碼。但是，它也允許開發人員使用 JSON 格式指定專案中使用的更多配置。

`tsconfig.json` 檔案始終位於專案的根目錄中。此檔案包含 JSON 格式的資料。

tsconfig.json 檔案的基本結構

`tsconfig.json` 檔案主要包含以下 5 個屬性，所有屬性都是可選的

• compileOnSave
• compilerOptions
• files
• include
• exclude

如果您在 `tsconfig.json` 檔案中不使用任何這些屬性，則編譯器將使用預設設定。

以下是 `tsconfig.json` 檔案的基本結構。

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs"
    },
    "files": [
        "app.ts",
        "base.ts"
    ],
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "src/**/*.calc.ts"
    ]
}

在上述檔案中，您可以根據需要新增更多編譯器選項或其他屬性列表中的元素。

讓我們逐一瞭解每個屬性。

compileOnSave 屬性

`compileOnSave` 屬性用於指定是否要在儲存程式碼時立即編譯專案程式碼。`compileOnSave` 屬性的預設值為 `false`。

如果為此屬性使用 `false` 值，則需要手動編譯程式碼。

以下是如何在 `tsconfig.json` 檔案中使用 `compileOnSave` 屬性。

{
    "compileOnSave": boolean_value
}

compilerOptions 屬性

`compilerOptions` 是 `tsconfig.json` 檔案中廣泛使用的屬性。它用於指定 TypeScript 編譯器編譯程式碼的設定。例如，如果您想在編譯 TypeScript 程式碼時使用特定版本的 JavaScript 或模組，您可以修改 `compilerOptions` 屬性。

以下是一些在 `tsconfig.json` 檔案中使用的常用編譯器選項。

以下是在 `tsconfig.json` 檔案中使用 `compilerOptions` 的常用方法。

{    
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs"
    }
}

files 屬性

`files` 屬性將檔案列表作為值，以包含在編譯過程中。如果檔案位於根目錄中，您可以直接新增檔名，或者為要包含在編譯過程中的每個檔案新增相對或絕對檔案路徑。

在這裡，我們展示瞭如何在 `tsconfig.json` 檔案中使用 `files` 屬性。

"files": [
    "app.ts",
    "base.ts"
]

include 屬性

`include` 屬性允許開發人員使用萬用字元查詢新增要編譯的 TypeScript 檔案列表。

如果要將所有檔案新增到編譯中，可以使用以下萬用字元查詢。

"include": [
    "src/**/*"
]

上述配置添加了 `src` 目錄中的所有檔案。

exclude 屬性

`exclude` 屬性與 `include` 屬性相反。它允許開發人員使用萬用字元查詢從編譯過程中刪除特定檔案。

"exclude": [
    "node_modules",
    "src/**/*.calc.ts"
]

上述配置從編譯過程中刪除了 node 模組和 `calc.ts` 檔案。

常見場景和配置

在這裡，我們解釋了開發人員需要更改 `tsconfig.json` 檔案的常見場景。

定位不同的 ECMAScript 版本

如果要在編譯 TypeScript 程式碼時定位不同的 ECMAScript 版本，可以使用以下配置。在這裡，我們更改了 `compilerOptions` 物件的 `target` 和 `module` 屬性的值。

{
  "compilerOptions": {
    "target": "es6",
    "module": "es2015"
  }
}

包含 Node.js 型別定義

當您使用 Node.js 時，您可能需要新增型別定義，以下是如何新增它。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2018",
    "lib": ["es2018", "dom"]
  },
  "include": [
    "src/**/*"
  ]
}

排除測試檔案

有時，開發人員需要從編譯過程中刪除測試檔案。以下是如何使用 `exclude` 屬性刪除特定測試檔案或目錄。

{
  "exclude": ["**/*.spec.ts", "**/*.test.ts"]
}

對於 TypeScript 開發人員來說，瞭解如何管理 `tsconfig.json` 檔案始終很重要。您可以編輯此檔案以更改編譯程式碼時的模組，新增和刪除編譯過程中的檔案，以及在儲存檔案後進行自動編譯。