TypeScript中tsconfig.json的完整配置指南
一、tsconfig.json簡(jiǎn)介
TypeScript項(xiàng)目的核心配置文件是tsconfig.json,它能對(duì)TypeScript編譯器的行為進(jìn)行控制,從而實(shí)現(xiàn)項(xiàng)目編譯選項(xiàng)的定制。要是項(xiàng)目里存在這個(gè)文件,就意味著它是TypeScript項(xiàng)目。此文件可以對(duì)編譯過(guò)程中要包含的文件、要排除的文件以及編譯器選項(xiàng)等內(nèi)容作出規(guī)定。
二、基本配置項(xiàng)
1. 項(xiàng)目結(jié)構(gòu)相關(guān)配置
| 配置項(xiàng) | 作用 | 是否必需 | 默認(rèn)值 | 可選值 |
|---|---|---|---|---|
| files | 明確指定要編譯的文件路徑列表 | 否 | 無(wú) | 字符串?dāng)?shù)組,例如:["src/index.ts", "src/utils.ts"] |
| include | 規(guī)定采用glob模式匹配要編譯的文件或文件夾 | 否 | 無(wú) | 字符串?dāng)?shù)組,例如:["src/**/*.ts", "test/**/*.ts"] |
| exclude | 指明采用glob模式匹配要排除的文件或文件夾 | 否 | [“node_modules”] | 字符串?dāng)?shù)組,例如:["node_modules", "dist"] |
| extends | 用于繼承其他tsconfig.json文件的配置 | 否 | 無(wú) | 字符串,例如:"@company/tsconfig-base" |
| references | 配置項(xiàng)目引用,適用于構(gòu)建大型項(xiàng)目 | 否 | 無(wú) | 對(duì)象數(shù)組,例如:[{ "path": "../shared" }] |
2. 編譯選項(xiàng)(compilerOptions)
2.1 基本編譯選項(xiàng)
| 配置項(xiàng) | 作用 | 是否必需 | 默認(rèn)值 | 可選值 |
|---|---|---|---|---|
| target | 設(shè)定編譯生成的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 | 聲明要包含的類型庫(kù)文件,例如DOM、ESNext等 | 否 | 依據(jù)target自動(dòng)推斷 | 字符串?dāng)?shù)組,例如:["DOM", "ESNext"] |
| outDir | 指定編譯輸出文件的目錄 | 否 | 與源文件同目錄 | 字符串,例如:"dist" |
| rootDir | 用于指定輸入文件的根目錄,主要影響輸出文件的目錄結(jié)構(gòu) | 否 | 包含tsconfig.json的目錄 | 字符串,例如:"src" |
2.2 嚴(yán)格類型檢查選項(xiàng)
| 配置項(xiàng) | 作用 | 是否必需 | 默認(rèn)值 | 可選值 |
|---|---|---|---|---|
| strict | 啟用所有嚴(yán)格類型檢查選項(xiàng),包含noImplicitAny、strictNullChecks等 | 否 | false | true/false |
| noImplicitAny | 當(dāng)變量類型為any時(shí),會(huì)拋出錯(cuò)誤 | 否 | false | true/false |
| strictNullChecks | 開啟嚴(yán)格的null和undefined檢查 | 否 | false | true/false |
| strictFunctionTypes | 啟用函數(shù)參數(shù)雙向協(xié)變檢查 | 否 | false | true/false |
| strictBindCallApply | 對(duì)bind、call和apply方法的參數(shù)類型進(jìn)行嚴(yán)格檢查 | 否 | false | true/false |
| strictPropertyInitialization | 確保類的非可選屬性在構(gòu)造函數(shù)中初始化 | 否 | false | true/false |
| noImplicitThis | 當(dāng)this類型為any時(shí),會(huì)拋出錯(cuò)誤 | 否 | false | true/false |
| alwaysStrict | 讓每個(gè)文件都以嚴(yán)格模式進(jìn)行編譯 | 否 | false | true/false |
2.3 模塊解析選項(xiàng)
| 配置項(xiàng) | 作用 | 是否必需 | 默認(rèn)值 | 可選值 |
|---|---|---|---|---|
| moduleResolution | 確定模塊解析策略,有’node’(Node.js風(fēng)格)和’classic’兩種可選 | 否 | classic | "Node", "Classic" |
| baseUrl | 用于設(shè)置解析非相對(duì)模塊名時(shí)的基目錄 | 否 | 無(wú) | 字符串,例如:"." |
| paths | 配置模塊名到基于baseUrl的路徑映射 | 否 | 無(wú) | 對(duì)象,例如:{ "@components/*": ["src/components/*"] } |
| rootDirs | 指定一個(gè)虛擬的目錄結(jié)構(gòu),在編譯時(shí)會(huì)將其合并 | 否 | 無(wú) | 字符串?dāng)?shù)組,例如:["src", "node_modules/@types"] |
| typeRoots | 設(shè)定要包含的類型定義文件目錄 | 否 | 默認(rèn)包含所有node_modules/@types目錄 | 字符串?dāng)?shù)組,例如:["node_modules/@types"] |
| types | 明確指定要包含的類型定義文件 | 否 | 無(wú) | 字符串?dāng)?shù)組,例如:["jest", "node"] |
| allowSyntheticDefaultImports | 允許從沒(méi)有默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入 | 否 | false | true/false |
| esModuleInterop | 生成額外的代碼,以支持CommonJS和ES6模塊之間的互操作性 | 否 | false | true/false |
2.4 JavaScript支持選項(xiàng)
| 配置項(xiàng) | 作用 | 是否必需 | 默認(rèn)值 | 可選值 |
|---|---|---|---|---|
| allowJs | 允許編譯JavaScript文件 | 否 | false | true/false |
| checkJs | 對(duì)JavaScript文件進(jìn)行類型檢查 | 否 | false | true/false |
| jsx | 配置JSX文件的編譯選項(xiàng),可選擇’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 其他編譯選項(xiàng)
| 配置項(xiàng) | 作用 | 是否必需 | 默認(rèn)值 | 可選值 |
|---|---|---|---|---|
| sourceMap | 生成source map文件,方便調(diào)試 | 否 | false | true/false |
| inlineSourceMap | 將source map內(nèi)聯(lián)到生成的JavaScript文件中 | 否 | false | true/false |
| inlineSources | 將源代碼內(nèi)聯(lián)到source map中 | 否 | false | true/false |
| declaration | 生成對(duì)應(yīng)的.d.ts聲明文件 | 否 | false | true/false |
| declarationMap | 為聲明文件生成source map | 否 | false | true/false |
| removeComments | 移除編譯后文件中的注釋 | 否 | false | true/false |
| noEmit | 不生成輸出文件 | 否 | false | true/false |
| skipLibCheck | 跳過(guò)對(duì)所有類型聲明文件(.d.ts)的類型檢查 | 否 | false | true/false |
| forceConsistentCasingInFileNames | 強(qiáng)制文件名稱的大小寫保持一致 | 否 | false | true/false |
三、高級(jí)配置示例
1. 基礎(chǔ)配置示例
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
2. React項(xiàng)目配置示例
{
"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項(xiàng)目配置示例
{
"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"]
}
四、配置技巧與注意事項(xiàng)
1. 配置繼承與分層
- 借助extends屬性,能夠繼承已有的配置文件,這樣有利于在多個(gè)項(xiàng)目間共享配置。
- 可以把配置文件劃分成tsconfig.base.json、tsconfig.build.json、tsconfig.test.json等,以此實(shí)現(xiàn)配置的分層管理。
2. 常見問(wèn)題與解決辦法
- 類型找不到錯(cuò)誤:要保證typeRoots或者types配置正確,或者通過(guò)npm安裝對(duì)應(yīng)的類型定義包。
- 模塊解析失?。簷z查moduleResolution和baseUrl/paths配置是否準(zhǔn)確。
- 編譯速度過(guò)慢:可以考慮使用skipLibCheck或者項(xiàng)目引用(Project References)來(lái)提升編譯速度。
3. 性能優(yōu)化建議
- 對(duì)于大型項(xiàng)目,推薦啟用incremental選項(xiàng),以此加快增量編譯的速度。
- 運(yùn)用tsc --watch或者集成開發(fā)工具的自動(dòng)編譯功能,能夠提高開發(fā)效率。
- 采用項(xiàng)目引用(Project References)來(lái)組織大型代碼庫(kù),實(shí)現(xiàn)并行編譯。
通過(guò)對(duì)tsconfig.json進(jìn)行合理配置,能夠讓TypeScript更好地契合項(xiàng)目需求,提升開發(fā)體驗(yàn)和代碼質(zhì)量。建議在項(xiàng)目初始階段就確定好配置方案,并根據(jù)項(xiàng)目的發(fā)展情況進(jìn)行相應(yīng)調(diào)整。
五、以下是一套完整的tsconfig.js的配置示例,可根據(jù)自己環(huán)境自行修改
{
"compilerOptions": {
/* 基本選項(xiàng) */
"target": "ESNext", /* 指定ECMAScript目標(biāo)版本 */
"module": "ESNext", /* 指定模塊系統(tǒng) */
"lib": ["DOM", "ESNext"], /* 指定要包含的庫(kù)文件 */
"outDir": "./dist", /* 指定輸出目錄 */
"rootDir": "./src", /* 指定輸入文件的根目錄 */
"moduleResolution": "Node", /* 指定模塊解析策略 */
"baseUrl": ".", /* 用于解析非相對(duì)模塊名稱的基礎(chǔ)目錄 */
"paths": { /* 模塊名到基于baseUrl的路徑映射 */
"@/*": ["src/*"],
"@components/*": ["src/components/*"]
},
/* 嚴(yán)格類型檢查選項(xiàng) */
"strict": true, /* 啟用所有嚴(yán)格類型檢查選項(xiàng) */
"noImplicitAny": true, /* 不允許隱式的any類型 */
"strictNullChecks": true, /* 啟用嚴(yán)格的null檢查 */
"strictFunctionTypes": true, /* 啟用嚴(yán)格的函數(shù)類型檢查 */
"strictBindCallApply": true, /* 嚴(yán)格的bind/call/apply檢查 */
"strictPropertyInitialization": true, /* 嚴(yán)格的屬性初始化檢查 */
"noImplicitThis": true, /* 不允許隱式的this類型 */
"alwaysStrict": true, /* 以嚴(yán)格模式解析并生成代碼 */
/* 模塊互操作性選項(xiàng) */
"esModuleInterop": true, /* 支持ES模塊與CommonJS的互操作性 */
"allowSyntheticDefaultImports": true, /* 允許從沒(méi)有默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入 */
"skipLibCheck": true, /* 跳過(guò)類型聲明文件檢查 */
"forceConsistentCasingInFileNames": true, /* 強(qiáng)制文件名稱的大小寫一致 */
/* JavaScript支持選項(xiàng) */
"allowJs": true, /* 允許編譯JavaScript文件 */
"checkJs": true, /* 對(duì)JavaScript文件進(jìn)行類型檢查 */
"jsx": "react-jsx", /* 指定JSX代碼的生成方式 */
/* 生成選項(xiàng) */
"sourceMap": true, /* 生成source map文件 */
"declaration": true, /* 生成對(duì)應(yīng)的.d.ts文件 */
"declarationMap": true, /* 為聲明文件生成source map */
"removeComments": true, /* 移除注釋 */
/* 調(diào)試選項(xiàng) */
"incremental": true, /* 啟用增量編譯 */
"traceResolution": false, /* 顯示模塊解析日志 */
"listEmittedFiles": true, /* 列出編譯后生成的文件 */
"listFiles": false /* 打印編譯過(guò)程中處理的文件 */
},
/* 項(xiàng)目結(jié)構(gòu)選項(xiàng) */
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
"exclude": ["node_modules", "dist", "**/*.spec.ts", "**/*.test.ts"],
"references": [
{ "path": "./tsconfig.shared.json" } /* 引用其他項(xiàng)目配置 */
]
}
到此這篇關(guān)于TypeScript中tsconfig.json的完整配置指南的文章就介紹到這了,更多相關(guān)TypeScript tsconfig.json配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用Mock.js生成前端測(cè)試數(shù)據(jù)
這篇文章主要介紹了使用Mock.js生成前端測(cè)試數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
基于JS實(shí)現(xiàn)密碼框(password)中顯示文字提示功能代碼
這篇文章主要介紹了實(shí)現(xiàn)密碼框(password)中顯示文字提示功能代碼,在項(xiàng)目開發(fā)中經(jīng)常會(huì)用到,需要的朋友可以參考下2016-05-05
three.js創(chuàng)造時(shí)空裂縫特效實(shí)現(xiàn)示例
這篇文章主要為大家介紹了three.js創(chuàng)造時(shí)空裂縫特效實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
JavaScript對(duì)象訪問(wèn)器Getter及Setter原理解析
這篇文章主要介紹了JavaScript對(duì)象訪問(wèn)器Getter及Setter原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
iscroll碰到Select無(wú)法選擇下拉刷新的解決辦法
本文主要介紹iscroll插件在使用中,遇到select下拉框無(wú)法下拉刷新的處理方法,希望能幫到大家。2016-05-05
JavaScript前端巧妙實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新詳解
作為開發(fā)者,我們常面對(duì)復(fù)雜的開發(fā)環(huán)境,要應(yīng)對(duì)即時(shí)通訊與數(shù)據(jù)實(shí)時(shí)更新的問(wèn)題,那么該如何精準(zhǔn)高效實(shí)現(xiàn)這些功能呢,下面小編就來(lái)和大家簡(jiǎn)單講講2025-03-03
Js Snowflake(雪花算法)生成隨機(jī)ID的實(shí)現(xiàn)方法
這篇文章主要介紹了Js Snowflake(雪花算法)生成隨機(jī)ID的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)
這篇文章主要介紹了Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)資料,需要的朋友可以參考下2016-05-05

