TypeScript - tsconfig.json：初學者的指南

你好，未來的編程超新星！? 今天，我們將踏上一段令人興奮的旅程，進入 TypeScript 的世界以及它可靠的助手——tsconfig.json 檔案。別擔心如果你從未寫過一行代碼——我將成為你的友好導遊，我們將一起逐步攻克這個問題。

TypeScript - tsconfig.json

tsconfig.json 是什麼？

在我們深入之前，讓我們先來討論一下 tsconfig.json 實際上是什麼。想像你正在建造一個房子（你的 TypeScript 專案）。tsconfig.json 檔案就像是你的房子的設計圖。它告訴 TypeScript 你希望你的專案如何建造，你想使用哪些功能，以及你希望規則有多嚴格。

tsconfig.json 檔案的基本結構

現在，讓我們來看看 tsconfig.json 檔案的基本結構。它是用 JSON 格式寫的，這是一種可以讓人和計算機都容易理解的方式來組織數據。

這裡有一個簡單的例子：

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

讓我們分解這個：

整個檔案都被大括號 {} 包裹。
在其中，我們有不同的部分，如 compilerOptions、include 和 exclude。
每個部分都包含特定的設置。

CompilerOptions

compilerOptions 部分是發揮魔力的地方。這就像告訴廚師（TypeScript 編譯器）你想要如何烹飪你的食物（代碼）。讓我們看看一些常見的選項：

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}

讓我們解釋每一個：

target：這告訴 TypeScript 要編譯到哪個版本的 JavaScript。 "es5" 在瀏覽器中被廣泛支持。
module：這指定使用哪個模塊系統。"commonjs" 在 Node.js 專案中常見。
strict：當設為 true 時，它會啟用一系列嚴格的類型檢查選項。
outDir：這是 TypeScript 將放置編譯後的 JavaScript 檔案的地方。
rootDir：這是 TypeScript 應該尋找你的源代碼文件的地方。
sourceMap：當為 true 時，它會生成源代碼映射文件，這對於調試非常有用。

Include 和 Exclude

include 和 exclude 部分告訴 TypeScript 哪些文件要編譯，哪些要忽略：

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

include：這告訴 TypeScript 編譯 src 文件夾及其子文件夾中的所有文件。
exclude：這告訴 TypeScript 忽略 node_modules 文件夾和任何以 .spec.ts 結尾的文件（通常用於測試文件）。

常見場景和配置

現在我們了解了基本知識，讓我們看看你可能會遇到的某些常見場景以及如何為它們配置 tsconfig.json。

場景 1：React 專案

如果你正在從事 React 專案，你可能會想要以下配置：

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

這個配置針對 React 開發進行了優化。它允許你使用 JSX，啟用嚴格的類型檢查，並為典型的 React 專案結構設置模塊解析。

場景 2：Node.js 後端專案

對於 Node.js 後端專案，你可能會使用以下配置：

{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

這個配置適合 Node.js 後端專案。它編譯到較新的 JavaScript 版本（ES2018），使用 CommonJS 模塊，並設置了輸入和輸出目錄。

有用的 tsconfig.json 選項

這裡是一張一些有用的 tsconfig.json 選項的表格，你可能想要使用：

選項	描述
`noImplicitAny`	在表達式和聲明中對含糊的 'any' 類型提出錯誤
`strictNullChecks`	啟用嚴格的 null 檢查
`strictFunctionTypes`	啟用函數類型的嚴格檢查
`strictBindCallApply`	啟用對函數的 'bind'、'call' 和 'apply' 方法的嚴格檢查
`noUnusedLocals`	對未使用的局部變量報告錯誤
`noUnusedParameters`	對未使用的參數報告錯誤
`noImplicitReturns`	在函數中沒有返回值的代碼路徑時報告錯誤
`noFallthroughCasesInSwitch`	在 switch 說明中報告 fallthrough 情況的錯誤

記住，你可以隨時參考官方 TypeScript 文檔以獲取完整的選項列表及其描述。

結論

這就是了，我的編程學徒！我們已經穿越了 tsconfig.json 的土地，從其基本結構到常見場景和有用的選項。記住，tsconfig.json 就像瑞士軍刀對於你的 TypeScript 專案——它非常多用處，並可以根據你的特定需求進行定制。

在你繼續你的 TypeScript 冒險時，不要害怕嘗試不同的配置。每個專案可能都需要稍微不同的設置，這沒有問題！你越多地玩轉 tsconfig.json，你就會越熟悉它的力量。

持續編碼，持續學習，最重要的是，玩得開心！直到下一次，願你的類型堅強，錯誤少少。快樂 TypeScript！??‍??‍?

Credits: Image by storyset

上一教程:

TypeScript - 裝箱與拆箱

下一教程:

從JavaScript到TypeScript