tsconfig.json 是 TypeScript 專案的核心設定檔，放在專案根目錄，用來告訴 TypeScript 編譯器（tsc）如何編譯你的 TypeScript 原始碼67911。有了這個設定檔，開發者不需要每次都手動輸入複雜的編譯參數，只需執行 tsc，編譯器就會根據 tsconfig.json 的內容自動處理所有設定911。

tsconfig.json 的主要結構

常見的 tsconfig.json 結構如下：

{
  "compilerOptions": { ... },
  "include": [ ... ],
  "exclude": [ ... ],
  "files": [ ... ],
  "extends": "...",
  "compileOnSave": true
}

下面分別說明各個參數的作用：

compilerOptions

• 說明：設定 TypeScript 編譯器的各種行為，是 tsconfig.json 的核心13711。

• 常見選項：

  • target：指定編譯後 JavaScript 的版本（如 ES5、ES6、ES2020 等）211。

  • module：指定使用的模組系統（如 commonjs、esnext）。

  • outDir：指定編譯後檔案輸出的目錄2。

  • allowJs：允許編譯 JavaScript 檔案2。

  • strict：啟用所有嚴格型別檢查選項。

  • sourceMap：是否生成 source map 檔案，方便除錯。

  • noImplicitAny：不允許隱式的 any 型別。

  • 其他還有非常多，詳細可查官方文件。

include

• 說明：指定哪些檔案或目錄需要被編譯2346810。

• 格式：陣列，可用萬用字元（如 "src/**/*.ts"）。

• 預設：如果沒設定，預設會包含當前目錄下所有 .ts、.tsx、.d.ts 檔案（不含 exclude 指定的內容）4。

exclude

• 說明：指定不需要被編譯的檔案或目錄346810。

• 常見用途：排除 node_modules、dist、測試檔等4。

• 格式：陣列，可用萬用字元。

  include 和 exclude 配置

include 和 exclude 支援萬用字元來指定文件模式57：

• *：匹配零個或多個字元（不含目錄分隔符）

• ?：匹配任一字元（不含目錄分隔符）

• **/：匹配所有子目錄，可嵌套至任何層級

例如：

json

{   
  "include": ["src/**/*"],  
  "exclude": ["node_modules", "**/*.spec.ts"] 
}

這會包含 src 目錄及其所有子目錄中的所有文件，但排除 node_modules 目錄和所有測試文件26。

files

• 說明：明確指定要編譯的檔案清單26710。

• 特點：必須逐一列出檔案，適合小型專案或特殊需求。如果檔案多，建議用 include 和 exclude2。

extends

• 說明：繼承另一個 tsconfig 設定檔，方便多專案共用基礎設定156。

• 用法：指定檔案路徑（相對或絕對），可以只覆蓋差異部分15。

compileOnSave

• 說明：部分 IDE 支援此選項，當檔案儲存時自動重新編譯3。

watchOptions

• 說明：設定監控檔案變化時的行為，提升開發效率（例如自動重編譯）7。

參數比較表

參數	作用說明	常見用途
compilerOptions	編譯器所有細部設定	控制 JS 版本、模組、嚴格模式等
include	指定要編譯的檔案/目錄（白名單）	精準控制編譯範圍
exclude	指定排除的檔案/目錄（黑名單）	避免編譯多餘檔案
files	明確列出要編譯的檔案清單	小型專案或特殊需求
extends	繼承其他 tsconfig 設定檔	多專案共用設定
compileOnSave	儲存時自動編譯（需 IDE 支援）	提升開發效率
watchOptions	設定自動監控檔案變化時的行為	開發時自動重編譯

總結

tsconfig.json 讓 TypeScript 編譯器能夠自動、統一地管理整個專案的編譯規則與範圍，是 TypeScript 專案不可或缺的設定檔。
tsconfig.json 是 TypeScript 專案中至關重要的配置文件，通過合理設置，可以讓 TypeScript 編譯器按照專案需求進行編譯和類型檢查。
各個參數可根據專案需求靈活調整，讓開發流程更高效、更安全

Citations:

1. https://clairechang.tw/2023/03/25/typescript/ts-tsconfig-json/
2. https://typescript.xuv.cc/tsconfig.json.html
3. https://wayne-blog.com/2023-03-07/ts-config-and-type/
4. https://blog.csdn.net/weixin_45168167/article/details/140187031
5. http://www.tslang.cn/docs/handbook/tsconfig-json.html
6. https://www.typescriptlang.org/zh/docs/handbook/tsconfig-json.html
7. https://blog.marsen.me/2024/10/08/2024/typescript_tsconfig_cheat_sheet/
8. https://www.cnblogs.com/laggage/p/explain-some-options-of-tsconfig.html
9. https://blog.csdn.net/Triumph_light/article/details/135175038
10. https://typescript.bootcss.com/tsconfig-json.html
11. https://most.tw/posts/nextjsarticle/tsconfing202409/
12. https://lq782655835.github.io/blogs/project/ts-tsconfig.html
13. https://ithelp.ithome.com.tw/m/articles/10263733
14. https://ithelp.ithome.com.tw/articles/10263733
15. https://ithelp.ithome.com.tw/m/articles/10314851
16. https://typescript.bootcss.com/tsconfig-json.html
17. https://typescript.dev.org.tw/docs/handbook/tsconfig-json.html
18. https://typescript.p6p.net/typescript-tutorial/tsconfig.json.html
19. https://wayne-blog.com/2023-03-07/ts-config-and-type/
20. https://ithelp.ithome.com.tw/articles/10252944
21. https://pjchender.github.io/typescript/tsconfig-and-tsc/
22. https://typescript.xuv.cc/tsconfig.json.html
23. https://ithelp.ithome.com.tw/articles/10335844
24. https://blog.csdn.net/qq_41579104/article/details/129856763
25. https://blog.csdn.net/weixin_40013817/article/details/127200956
26. https://blog.csdn.net/bianliuzhu/article/details/129833976
27. https://blog.csdn.net/qq_44831027/article/details/108150470
28. https://www.cnblogs.com/fangsmile/p/14239529.html
29. https://typescript.dev.org.tw/tsconfig
30. https://jkchao.github.io/typescript-book-chinese/faqs/tsconfig-behavior.html
31. https://pjchender.github.io/ironman-2021/ironman-2021-day03/

---

Answer from Perplexity: pplx.ai/share