Skip to main content

[TS] TypeScript Config File (tsconfig)

此篇為各筆記之整理,非原創內容,資料來源可見下方連結與文後參考資料。

TSC#

$ npx tsc -b . # build
$ npx tsc -b . --clean # 移除掉打包後產生的檔案

Configuration#

TL;DR;#

npx tsc --showConfig # 可以檢視最終吃到的設定檔

設定檔#

如果是用 VS Code 的話,滑鼠移上去 property 就會顯示每個設定的描述:

  • compilerOptions
    • baseUrl:設成 "baseUrl": "./src" 則可以使用 absolute path 來載入模組
  • include:如果使用 glob pattern 但沒有指定副檔名的話,預設只會使用有支援的副檔名(例如,.ts.tsx.d.ts,如果 allowJstrue 的話,則會一併啟用 .js.jsx),這些指定的檔案會從 tsconfig.json 所放置的位置作為相對目錄。
  • exclude:從已經被 include 中的檔案中加以排除掉。
  • extends
    • 被繼承檔案的設定會先被載入,接著被該檔案內的設定加已覆蓋
    • 所有在設定檔中的相對路徑,都會根據原設定檔的位置加以解析
    • file, includeexclude 的內容會覆蓋掉被繼承的檔案中所寫的
    • 唯一一個不會被繼承的屬性是 references
    • 帶有相對路徑的屬性不會被繼承,而是會根據原設定檔中的相對路徑被解析
// tsconfig.json
/* Visit https://aka.ms/tsconfig.json to read more about this file */
{
"compilerOptions": {
/* Basic Options */
"target": "ES2018", // 打包後要支援到的 ECMAScript 版本
"module": "commonjs",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": false, // 是否允許匯入 js 檔,會影響到 include 時解析的副檔名是否包含(.js 和 .jsx)
"declaration": true,
// 如果沒設定會套用預設值(TS 自動判斷)
// 有「機會」導致 src 的資料夾也一起被 build 到 dist 資料夾中
// 例如 TS 自動把 rootDir 判斷為 { "rootDir": "." }
"rootDir": "src",
// 預設 tsc 會直接把編譯好的 js 檔放在與 ts 檔相同的路徑,但這樣檔案會很散亂,因此全部放到 dist
"outDir": "dist",
/* Strict Type-Checking Options */
"strict": true,
/* Additional Checks */
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true, // 確保 switch case 都會有 break 或 return
/* Module Resolution Options */
"baseUrl": "./", // 匯入模組時,路徑可以使用從 baseUrl 開始,而不需要 ./../ 這種寫法
"paths": {
"@": ["src"] // 將 @ map 到 src
},
"esModuleInterop": false,
/* Source Map Options */
"sourceMap": true,
/* Advanced Options */
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true // 確保檔案的大小寫一致,避免某些作業系統對大小寫不敏感
},
"include": ["src/**/*"],
"exclude": []
}
Last updated on