前情提要
tsconfig.json 文件是一個 TypeScript 專案的配置文件, 它位於根目錄中, 並定義了專案的編譯器選項。
提供給開發人員輕鬆配置 TypeScript 編譯器, 並確保專案的程式碼在不同的環境中始終保持一致。
你可以使用 tsc --init
指令自動產生。
也可以參考 Matt Pocock 的 TSConfig Cheat Sheet
TSConfig 有上百個配置, 本文將用來重點記錄一些相關的配置
本文
2024/10 Matt Pocock 的建議配置
相關說明請參考原文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| { "compilerOptions": { "esModuleInterop": true, "skipLibCheck": true, "target": "es2022", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, "verbatimModuleSyntax": true,
"strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true,
"module": "NodeNext", "outDir": "dist", "sourceMap": true,
"declaration": true,
"composite": true, "declarationMap": true,
"module": "preserve", "noEmit": true,
"lib": ["es2022", "dom", "dom.iterable"],
"lib": ["es2022"] } }
|
files
預設值為 false
, 如果只有少量的 ts 檔, 很適合設定這個files
但實務上更常用 include
與 exclude
搭配,
兩者都可使用 wildcard , exclude 擁有較高的優先級,
例如下面的設定 src/.test
底下的檔案將不會被編譯:
1 2 3 4 5 6 7 8 9
| { "compilerOptions": {}, "include": ["src/**/*"], "exclude": ["src/test/**/*"] "files": [ "a_typescript_file.ts", "other_ts_code.ts" ] }
|
Compiler Options
這部份是 tsconfig 相關設定的主體, 有需要時來這裡查就好
下面的例子是一些常用的設定說明:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| { "compilerOptions": { "esModuleInterop": true, "skipLibCheck": true, "target": "es2022", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, "verbatimModuleSyntax": true } }
|
Watch Option
watchOptions
用於配置 TypeScript 在開發過程中如何監控文件變更。
這些選項主要用於改善開發效率, 當監控的文件或目錄發生變化時, TypeScript 會自動重新編譯或執行其他指定操作。
這對於開發階段非常重要, 因為它允許開發者即時查看更改的影響, 而不必手動重新編譯代碼。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| { "compilerOptions": {}, "watchOptions": { "watchFile": "useFsEvents", "watchDirectory": "dynamicPriorityPolling", "pollingInterval": 2000, "recursive": true } }
|
Type Acquisition
Type Acquisition 主要適用於 JavaScript 專案。
在 TypeScript 專案中, 開發者必須明確地將型別包含在專案中。
相對地, 對於 JavaScript 專案, TypeScript 工具會自動在後台下載所需的型別, 並將其儲存在 node_modules 以外的位置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| { "compilerOptions": {}, "typeAcquisition": { "enable": true,
"include": ["jquery", "lodash"],
"exclude": ["some-legacy-library"],
"disableFilenameBasedTypeAcquisition": false }, }
|
參考
(fin)