TypeScript中tsconfig.json的完整配置指南
更新時間：2025年10月10日 09:33:54 作者：Forever丿顧北
tsconfig.json是TypeScript項目的核心配置文件,用于控制編譯器的編譯行為,通過合理配置這些選項,可以定制TypeScript的編譯過程,滿足不同項目的需求,感興趣的可以了解一下
一、tsconfig.json簡介
TypeScript項目的核心配置文件是tsconfig.json，它能對TypeScript編譯器的行為進行控制，從而實現(xiàn)項目編譯選項的定制。要是項目里存在這個文件，就意味著它是TypeScript項目。此文件可以對編譯過程中要包含的文件、要排除的文件以及編譯器選項等內容作出規(guī)定。
二、基本配置項
1. 項目結構相關配置
| 配置項 | 作用 | 是否必需 | 默認值 | 可選值 |
|---|---|---|---|---|
| files | 明確指定要編譯的文件路徑列表 | 否 | 無 | 字符串數(shù)組，例如：["src/index.ts", "src/utils.ts"] |
| include | 規(guī)定采用glob模式匹配要編譯的文件或文件夾 | 否 | 無 | 字符串數(shù)組，例如：["src/**/*.ts", "test/**/*.ts"] |
| exclude | 指明采用glob模式匹配要排除的文件或文件夾 | 否 | [“node_modules”] | 字符串數(shù)組，例如：["node_modules", "dist"] |
| extends | 用于繼承其他tsconfig.json文件的配置 | 否 | 無 | 字符串，例如："@company/tsconfig-base" |
| references | 配置項目引用，適用于構建大型項目 | 否 | 無 | 對象數(shù)組，例如：[{ "path": "../shared" }] |
2. 編譯選項（compilerOptions）
2.1 基本編譯選項
| 配置項 | 作用 | 是否必需 | 默認值 | 可選值 |
|---|---|---|---|---|
| target | 設定編譯生成的JavaScript版本，像ES3、ES5、ES6/ES2015等 | 否 | ES3 | "ES3", "ES5", "ES6", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020", "ES2021", "ES2022", "ESNext" |
| module | 確定生成的模塊系統(tǒng)格式，例如commonjs、amd、esnext等 | 否 | CommonJS | "None", "CommonJS", "AMD", "System", "UMD", "ES6", "ES2015", "ES2020", "ESNext", "Node16", "NodeNext" |
| lib | 聲明要包含的類型庫文件，例如DOM、ESNext等 | 否 | 依據(jù)target自動推斷 | 字符串數(shù)組，例如：["DOM", "ESNext"] |
| outDir | 指定編譯輸出文件的目錄 | 否 | 與源文件同目錄 | 字符串，例如："dist" |
| rootDir | 用于指定輸入文件的根目錄，主要影響輸出文件的目錄結構 | 否 | 包含tsconfig.json的目錄 | 字符串，例如："src" |
2.2 嚴格類型檢查選項
| 配置項 | 作用 | 是否必需 | 默認值 | 可選值 |
|---|---|---|---|---|
| strict | 啟用所有嚴格類型檢查選項，包含noImplicitAny、strictNullChecks等 | 否 | false | true/false |
| noImplicitAny | 當變量類型為any時，會拋出錯誤 | 否 | false | true/false |
| strictNullChecks | 開啟嚴格的null和undefined檢查 | 否 | false | true/false |
| strictFunctionTypes | 啟用函數(shù)參數(shù)雙向協(xié)變檢查 | 否 | false | true/false |
| strictBindCallApply | 對bind、call和apply方法的參數(shù)類型進行嚴格檢查 | 否 | false | true/false |
| strictPropertyInitialization | 確保類的非可選屬性在構造函數(shù)中初始化 | 否 | false | true/false |
| noImplicitThis | 當this類型為any時，會拋出錯誤 | 否 | false | true/false |
| alwaysStrict | 讓每個文件都以嚴格模式進行編譯 | 否 | false | true/false |
2.3 模塊解析選項
| 配置項 | 作用 | 是否必需 | 默認值 | 可選值 |
|---|---|---|---|---|
| moduleResolution | 確定模塊解析策略，有’node’（Node.js風格）和’classic’兩種可選 | 否 | classic | "Node", "Classic" |
| baseUrl | 用于設置解析非相對模塊名時的基目錄 | 否 | 無 | 字符串，例如："." |
| paths | 配置模塊名到基于baseUrl的路徑映射 | 否 | 無 | 對象，例如：{ "@components/*": ["src/components/*"] } |
| rootDirs | 指定一個虛擬的目錄結構，在編譯時會將其合并 | 否 | 無 | 字符串數(shù)組，例如：["src", "node_modules/@types"] |
| typeRoots | 設定要包含的類型定義文件目錄 | 否 | 默認包含所有node_modules/@types目錄 | 字符串數(shù)組，例如：["node_modules/@types"] |
| types | 明確指定要包含的類型定義文件 | 否 | 無 | 字符串數(shù)組，例如：["jest", "node"] |
| allowSyntheticDefaultImports | 允許從沒有默認導出的模塊中默認導入 | 否 | false | true/false |
| esModuleInterop | 生成額外的代碼，以支持CommonJS和ES6模塊之間的互操作性 | 否 | false | true/false |
2.4 JavaScript支持選項
| 配置項 | 作用 | 是否必需 | 默認值 | 可選值 |
|---|---|---|---|---|
| allowJs | 允許編譯JavaScript文件 | 否 | false | true/false |
| checkJs | 對JavaScript文件進行類型檢查 | 否 | false | true/false |
| jsx | 配置JSX文件的編譯選項，可選擇’preserve’、‘react-native’或’react’ | 否 | preserve | "preserve", "react-native", "react", "react-jsx", "react-jsxdev" |
| jsxFactory | 指定JSX元素的工廠函數(shù)，例如’React.createElement’ | 否 | React.createElement | 字符串，例如："h" |
| jsxFragmentFactory | 指定JSX片段的工廠函數(shù)，例如’React.Fragment’ | 否 | React.Fragment | 字符串，例如："Fragment" |
2.5 其他編譯選項
| 配置項 | 作用 | 是否必需 | 默認值 | 可選值 |
|---|---|---|---|---|
| sourceMap | 生成source map文件，方便調試 | 否 | false | true/false |
| inlineSourceMap | 將source map內聯(lián)到生成的JavaScript文件中 | 否 | false | true/false |
| inlineSources | 將源代碼內聯(lián)到source map中 | 否 | false | true/false |
| declaration | 生成對應的.d.ts聲明文件 | 否 | false | true/false |
| declarationMap | 為聲明文件生成source map | 否 | false | true/false |
| removeComments | 移除編譯后文件中的注釋 | 否 | false | true/false |
| noEmit | 不生成輸出文件 | 否 | false | true/false |
| skipLibCheck | 跳過對所有類型聲明文件（.d.ts）的類型檢查 | 否 | false | true/false |
| forceConsistentCasingInFileNames | 強制文件名稱的大小寫保持一致 | 否 | false | true/false |
三、高級配置示例
1. 基礎配置示例
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
2. React項目配置示例
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"lib": ["DOM", "ESNext"],
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
3. Node.js項目配置示例
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"lib": ["ESNext"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"sourceMap": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "dist"]
}
四、配置技巧與注意事項
1. 配置繼承與分層
- 借助extends屬性，能夠繼承已有的配置文件，這樣有利于在多個項目間共享配置。
- 可以把配置文件劃分成tsconfig.base.json、tsconfig.build.json、tsconfig.test.json等，以此實現(xiàn)配置的分層管理。
2. 常見問題與解決辦法
- 類型找不到錯誤：要保證typeRoots或者types配置正確，或者通過npm安裝對應的類型定義包。
- 模塊解析失?。簷z查moduleResolution和baseUrl/paths配置是否準確。
- 編譯速度過慢：可以考慮使用skipLibCheck或者項目引用（Project References）來提升編譯速度。
3. 性能優(yōu)化建議
- 對于大型項目，推薦啟用incremental選項，以此加快增量編譯的速度。
- 運用tsc --watch或者集成開發(fā)工具的自動編譯功能，能夠提高開發(fā)效率。
- 采用項目引用（Project References）來組織大型代碼庫，實現(xiàn)并行編譯。
通過對tsconfig.json進行合理配置，能夠讓TypeScript更好地契合項目需求，提升開發(fā)體驗和代碼質量。建議在項目初始階段就確定好配置方案，并根據(jù)項目的發(fā)展情況進行相應調整。
五、以下是一套完整的tsconfig.js的配置示例，可根據(jù)自己環(huán)境自行修改
{
"compilerOptions": {
/* 基本選項 */
"target": "ESNext", /* 指定ECMAScript目標版本 */
"module": "ESNext", /* 指定模塊系統(tǒng) */
"lib": ["DOM", "ESNext"], /* 指定要包含的庫文件 */
"outDir": "./dist", /* 指定輸出目錄 */
"rootDir": "./src", /* 指定輸入文件的根目錄 */
"moduleResolution": "Node", /* 指定模塊解析策略 */
"baseUrl": ".", /* 用于解析非相對模塊名稱的基礎目錄 */
"paths": { /* 模塊名到基于baseUrl的路徑映射 */
"@/*": ["src/*"],
"@components/*": ["src/components/*"]
},
/* 嚴格類型檢查選項 */
"strict": true, /* 啟用所有嚴格類型檢查選項 */
"noImplicitAny": true, /* 不允許隱式的any類型 */
"strictNullChecks": true, /* 啟用嚴格的null檢查 */
"strictFunctionTypes": true, /* 啟用嚴格的函數(shù)類型檢查 */
"strictBindCallApply": true, /* 嚴格的bind/call/apply檢查 */
"strictPropertyInitialization": true, /* 嚴格的屬性初始化檢查 */
"noImplicitThis": true, /* 不允許隱式的this類型 */
"alwaysStrict": true, /* 以嚴格模式解析并生成代碼 */
/* 模塊互操作性選項 */
"esModuleInterop": true, /* 支持ES模塊與CommonJS的互操作性 */
"allowSyntheticDefaultImports": true, /* 允許從沒有默認導出的模塊中默認導入 */
"skipLibCheck": true, /* 跳過類型聲明文件檢查 */
"forceConsistentCasingInFileNames": true, /* 強制文件名稱的大小寫一致 */
/* JavaScript支持選項 */
"allowJs": true, /* 允許編譯JavaScript文件 */
"checkJs": true, /* 對JavaScript文件進行類型檢查 */
"jsx": "react-jsx", /* 指定JSX代碼的生成方式 */
/* 生成選項 */
"sourceMap": true, /* 生成source map文件 */
"declaration": true, /* 生成對應的.d.ts文件 */
"declarationMap": true, /* 為聲明文件生成source map */
"removeComments": true, /* 移除注釋 */
/* 調試選項 */
"incremental": true, /* 啟用增量編譯 */
"traceResolution": false, /* 顯示模塊解析日志 */
"listEmittedFiles": true, /* 列出編譯后生成的文件 */
"listFiles": false /* 打印編譯過程中處理的文件 */
},
/* 項目結構選項 */
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
"exclude": ["node_modules", "dist", "**/*.spec.ts", "**/*.test.ts"],
"references": [
{ "path": "./tsconfig.shared.json" } /* 引用其他項目配置 */
]
}
到此這篇關于TypeScript中tsconfig.json的完整配置指南的文章就介紹到這了,更多相關TypeScript tsconfig.json配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
javascript函數(shù)的call、apply和bind的原理及作用詳解
javascript函數(shù)的call、apply和bind?本質是用來實現(xiàn)繼承的，專業(yè)點說法就是改變函數(shù)體內部this的指向，當一個對象沒有某個功能時，就可以用這3個來從有相關功能的對象里借用過來，文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-05-05
找到一點可憐的關于dojo資料，謝謝作者！...2006-12-12
本文章來給大家推薦一個不錯的鼠標經過顯示二級菜單js特效效果，有需要了解的朋友可以參考一下2013-08-08
這篇文章主要介紹了JS如何實現(xiàn)網站內容如何實現(xiàn)禁止復制和粘貼、另存為,需要的朋友可以參考下2014-02-02
java和javascript獲取word文檔的書簽位置對比
這篇文章主要介紹了java和javascript獲取word文檔的書簽位置代碼對比,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了微信小程序實現(xiàn)圖片翻轉效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
Javascript實現(xiàn)圖片輪播效果(二)圖片序列節(jié)點的控制實現(xiàn)
這篇文章主要介紹了Javascript實現(xiàn)圖片輪播效果(二)圖片序列節(jié)點的控制實現(xiàn)的相關資料,需要的朋友可以參考下2016-02-02
javascript實現(xiàn)原生ajax的幾種方法介紹
項目中不需要加載jquery這種龐大的js插件要使用到ajax這種功能該如何辦呢？下面和大家分享幾種利用javascript實現(xiàn)原生ajax的方法2013-09-09
原生JavaScript實現(xiàn)todolist功能
本篇文章給大家介紹了通過原生JavaScript實現(xiàn)todolist功能相關知識點，對此有需要的朋友可以學習下。2018-03-03
本文主要介紹了Javascript的this用法，具有很好的參考價值，有需要了解的朋友可以看看2017-01-01