tsconfig.json
是 TypeScript 的配置文件,用于控制编译行为、类型检查和输出选项。本文档详细列出 TypeScript 5.8.3 的所有配置项,解释其功能作用,并提供多个常用模板,可直接用于不同开发场景。
1. tsconfig.json 配置结构
tsconfig.json
通常包含以下顶级字段:
compilerOptions
:定义编译器行为的核心选项。include
:指定编译的文件或目录。exclude
:排除不需要编译的文件或目录。extends
:继承其他配置文件。files
:指定具体编译文件列表。references
:支持项目引用(多项目管理)。
以下是所有 compilerOptions
配置项的详细说明,分为几大类。
2. compilerOptions 配置项详解
2.1 基本选项
配置项 | 类型 | 默认值 | 功能作用 |
---|---|---|---|
target |
string |
"es3" |
指定编译目标 ECMAScript 版本(如 "es3" 、"es5" 、"esnext" )。影响输出的 JavaScript 语法。例如,"esnext" 支持最新的 JavaScript 特性。 |
module |
string |
"commonjs" (当 target 为 "es3" 或 "es5" ) |
指定模块系统(如 "commonjs" 、"esnext" 、"nodenext" )。"nodenext" 是 Node.js 最新模块系统的推荐选项。 |
lib |
string[] |
随 target 变化 |
指定包含的内置 API 声明文件(如 "dom" 、"esnext" )。未设置时根据 target 自动包含。 |
outDir |
string |
- | 指定编译输出目录,生成的 JavaScript 文件将存放在此。 |
rootDir |
string |
- | 指定输入文件的根目录,用于控制输出目录结构。 |
sourceMap |
boolean |
false |
是否生成源映射文件,便于调试编译后的 JavaScript。 |
declaration |
boolean |
false |
是否生成 .d.ts 声明文件,适用于库开发。 |
declarationMap |
boolean |
false |
是否为声明文件生成源映射,便于调试类型定义。 |
removeComments |
boolean |
false |
是否在编译输出中移除注释。 |
noEmit |
boolean |
false |
是否禁止生成输出文件,仅进行类型检查。 |
noEmitOnError |
boolean |
false |
如果存在编译错误,是否禁止生成输出文件。 |
示例:基本配置
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}
2.2 严格类型检查选项
配置项 | 类型 | 默认值 | 功能作用 |
---|---|---|---|
strict |
boolean |
false |
启用所有严格类型检查选项(如 noImplicitAny 、strictNullChecks 等)的快捷方式。推荐开启以提高类型安全性。 |
noImplicitAny |
boolean |
false |
禁止隐式的 any 类型,强制为未指定类型的变量显式声明类型。 |
strictNullChecks |
boolean |
false |
启用严格的空值检查,null 和 undefined 不可赋值给其他类型(除 any 和 unknown )。 |
strictFunctionTypes |
boolean |
false |
启用严格的函数类型检查,确保函数参数类型更严格地匹配。 |
strictBindCallApply |
boolean |
false |
严格检查 bind 、call 和 apply 方法的类型。 |
strictPropertyInitialization |
boolean |
false |
确保类中的非 undefined 属性在构造函数中初始化。需配合 strictNullChecks 使用。 |
noImplicitThis |
boolean |
false |
禁止隐式的 this 类型,防止在非明确上下文中使用 this 。 |
alwaysStrict |
boolean |
false |
在生成的 JavaScript 中添加 "use strict" 。 |
示例:严格模式
{
"compilerOptions": {
"strict": true
}
}
2.3 模块解析选项
配置项 | 类型 | 默认值 | 功能作用 |
---|---|---|---|
moduleResolution |
string |
"classic" (若 module 为 "amd" 等),否则 "node" 或 "nodenext" |
指定模块解析策略。"nodenext" 推荐用于 Node.js 项目,支持 ESM 和 CommonJS。 |
baseUrl |
string |
- | 设置模块解析的基准路径,便于使用非相对路径导入。 |
paths |
object |
- | 定义模块路径别名,需配合 baseUrl 使用。 |
esModuleInterop |
boolean |
false |
启用与 CommonJS 模块的互操作性,简化导入默认导出。 |
allowSyntheticDefaultImports |
boolean |
false |
允许从没有默认导出的模块导入默认值,需配合 esModuleInterop 。 |
resolveJsonModule |
boolean |
false |
允许导入 JSON 文件并提供类型支持。 |
示例:模块解析
{
"compilerOptions": {
"moduleResolution": "nodenext",
"baseUrl": "src",
"paths": {
"@utils/*": "utils/*"
},
"esModuleInterop": true,
"resolveJsonModule": true
}
}
2.4 额外检查选项
配置项 | 类型 | 默认值 | 功能作用 |
---|---|---|---|
noUnusedLocals |
boolean |
false |
报告未使用的局部变量。 |
noUnusedParameters |
boolean |
false |
报告未使用的函数参数。 |
noImplicitReturns |
boolean |
false |
确保函数的所有路径都有返回值。 |
noFallthroughCasesInSwitch |
boolean |
false |
防止 switch 语句中的 case 意外贯穿。 |
示例:额外检查
{
"compilerOptions": {
"noUnusedLocals": true,
"noUnusedParameters": true
}
}
2.5 实验性选项
配置项 | 类型 | 默认值 | 功能作用 |
---|---|---|---|
experimentalDecorators |
boolean |
false |
启用实验性的装饰器支持。 |
emitDecoratorMetadata |
boolean |
false |
为装饰器生成元数据,常用于框架如 Angular。 |
示例:装饰器
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
2.6 高级选项
配置项 | 类型 | 默认值 | 功能作用 |
---|---|---|---|
skipLibCheck |
boolean |
false |
跳过对 .d.ts 文件的类型检查,加快编译速度。 |
allowJs |
boolean |
false |
允许编译 JavaScript 文件。 |
checkJs |
boolean |
false |
对 JavaScript 文件进行类型检查,需配合 allowJs 。 |
isolatedModules |
boolean |
false |
确保每个文件独立编译,适用于工具如 Babel。 |
incremental |
boolean |
false |
启用增量编译,保存编译信息到 .tsbuildinfo 文件,加快后续编译。 |
composite |
boolean |
false |
启用项目引用和增量编译,需配合 incremental 和 declaration 。 |
示例:高级选项
{
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"incremental": true
}
}
2.7 源文件控制
配置项 | 类型 | 默认值 | 功能作用 |
---|---|---|---|
include |
string[] |
- | 指定需要编译的文件或目录,支持通配符(如 "src/**/*" )。 |
exclude |
string[] |
["node_modules", "bower_components", "jspm_packages"] |
排除不需要编译的文件或目录。 |
files |
string[] |
- | 显式指定编译的文件列表,优先级高于 include 。 |
示例:文件控制
{
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
3. 常用 tsconfig.json 模板
以下是针对不同场景的推荐配置模板,可直接使用或根据需求调整。
3.1 Node.js 项目模板
适用于 Node.js 项目,支持 ESM 和 CommonJS,推荐严格类型检查。
{
"compilerOptions": {
"target": "esnext",
"module": "nodenext",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"sourceMap": true,
"incremental": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
适用场景:Node.js 后端开发、CLI 工具,支持最新 ECMAScript 特性。
3.2 React 项目模板
适用于 React 项目,使用 Vite 或 Create React App。
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "react-jsx",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"moduleResolution": "node",
"allowJs": true,
"baseUrl": "src",
"paths": {
"@components/*": ["components/*"]
}
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
适用场景:React Web 应用,使用 JSX 和模块别名。
3.3 TypeScript 库开发模板
适用于开发可发布的 TypeScript 库,生成声明文件。
{
"compilerOptions": {
"target": "es2018",
"module": "esnext",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"declaration": true,
"declarationMap": true,
"esModuleInterop": true,
"skipLibCheck": true,
"moduleResolution": "node"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist", "test"]
}
适用场景:开发 npm 包,生成类型声明文件供其他项目使用。
3.4 Monorepo 项目模板
适用于使用项目引用的多项目管理(如 Monorepo)。
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"composite": true,
"incremental": true,
"declaration": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"],
"references": [{ "path": "../shared" }]
}
适用场景:大型项目,包含多个子项目(如前端和后端共享代码)。
3.5 实验性特性模板
适用于使用装饰器或实验性功能的项目。
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
适用场景:使用装饰器的框架(如 Angular)或实验性功能开发。
4. 最佳实践
- 启用严格模式:设置
"strict": true
以确保类型安全。 - 模块系统选择:Node.js 项目使用
"nodenext"
,前端项目使用"esnext"
。 - 模块别名:通过
baseUrl
和paths
简化导入路径。 - 增量编译:启用
incremental
和composite
提高编译性能。 - 跳过库检查:设置
skipLibCheck: true
加快编译速度。 - 声明文件:库开发时启用
declaration
和declarationMap
。
5. 注意事项
- 配置继承:使用
extends
继承基础配置文件,减少重复。
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./dist"
}
}
- 环境兼容性:根据目标运行环境选择
target
和lib
。 - 调试支持:启用
sourceMap
以便在浏览器或 Node.js 中调试。
6. 资源与进一步学习
- 官方文档:https://www.typescriptlang.org/tsconfig
- TypeScript Handbook:https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
- GitHub 仓库:https://github.com/microsoft/TypeScript