tsconfig.json的配置项介绍
如果一个目录下存在一个tsconfig.json
文件,那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json
文件中指定了用来编译这个项目的根文件和编译选项。本篇文章主要解释的是常用配置项,还有一些没有列举到的,用到的时候再去查资料便可(文档地址在文章末尾)。
tsconfig.json文件不需要手写,使用tsc命令可以自动生成初始化的tsconfig.json文件。
tsc --init
一、核心结构
{"compilerOptions": {}, // 编译选项"include": ["src/**/*"], // 包含文件"exclude": ["node_modules"], // 排除文件"extends": "./base.json", // 继承其他配置"references": [] // 项目引用(用于Monorepo)"files": [] //指定要包括在程序中的文件白名单。如果找不到就会报错。
}
二、compilerOptions
编译选项
重要的结构:
"compilerOptions": {"target": "ESNext", // 指定编译后的 JS 版本(如 ES5/ES2015/ES2022)"module": "CommonJS", // 模块系统(CommonJS/ES6/UMD 等)"strict": true, // 启用所有严格类型检查(包括 noImplicitAny, strictNullChecks 等)"lib": ["ES6", "DOM"], // 引入运行时环境支持的库类型(如 DOM、ESNext)"outDir": "./dist", // 输出目录,默认与源文件同级"rootDir": "./src", // 指定源代码根目录"jsx": "react", // 支持 React JSX"strictFunctionTypes": true, // 严格函数类型检查"sourceMap": true, // 生成 .map 文件用于调试"allowJs": true, // 允许编译 JS 文件(渐进式迁移)"esModuleInterop": true // 解决 CommonJS 与 ES 模块兼容性问题}
1. 编译目标与模块 /* Modules */
-
target
指定编译后的 JavaScript 版本(如ES5
、ES2020
、ESNext
)。 示例:"target": "ES2020"
(Node.js 推荐)或"ESNext"
(现代前端项目)。 -
module
定义模块系统类型,如CommonJS
(Node.js)、ESNext
(前端项目)或AMD
。 注意:需与moduleResolution
配合,如"moduleResolution": "node"
用于 Node.js 的模块解析。 -
lib
显式指定包含的内置 API 类型声明,如["ES2020", "DOM"]
(前端需包含 DOM API)。
2. 输出控制 /* Emit */
outDir
输出目录,如"outDir": "./dist"
。rootDir
源代码根目录,如"rootDir": "./src"
。sourceMap
生成.map
文件,用于调试时映射源码 。
3. 严格类型检查 /* Type Checking */
-
strict
启用所有严格检查(等价于同时启用以下选项):noImplicitAny
:禁止隐式any
类型(如未明确类型的函数参数) 。strictNullChecks
:强制处理null
/undefined
,避免空值错误 。strictFunctionTypes
:严格检查函数参数逆变 。strictPropertyInitialization
:类属性必须初始化 。
-
附加检查
noUnusedLocals
/noUnusedParameters
:禁止未使用的变量或参数 。
noImplicitReturns
:函数所有分支必须显式返回值 。
4. 模块解析
-
baseUrl
与paths
定义路径别名,简化导入:"baseUrl": "./src", "paths": { "@/*": ["*"], "utils/*": ["utils/*"] }
-
moduleResolution
模块解析策略:node
:Node.js 风格解析(默认)bundler
:兼容打包工具(如 Vite)的无后缀名解析 。
5. 实验性特性
experimentalDecorators
启用装饰器语法(如 Angular 或 TypeORM) 。
emitDecoratorMetadata
生成装饰器元数据(需结合反射库使用) 。
6. 兼容性选项
allowJs
允许编译.js
文件(用于逐步迁移 JS 项目到 TS) 。esModuleInterop
解决 CommonJS 与 ES 模块的默认导入兼容性 。
三、文件控制
1. 扩展/包含 - include
/exclude
include指定要包含在程序中的文件名或模式数组。这些文件名相对于包含 tsconfig.json
文件的目录解析,exclude
指定在解析 include
时应跳过的文件名或模式数组。
{// ... 其他配置 ...// 包含规则(需手动添加到配置中)"include": ["src/**/*.ts" // 匹配 src 目录及其子目录中所有 .ts 文件],// 排除规则(需手动添加到配置中)"exclude": ["node_modules", // 默认排除 node_modules"**/*.spec.ts" // 排除所有测试文件(以 .spec.ts 结尾)]
}
2. 排除 - extends
先加载来自基本文件的配置,然后由继承配置中的配置覆盖。在配置文件中找到的所有相对路径将相对于它们起源的配置文件解析
示例
// configs/base.json:
{"compilerOptions": {"noImplicitAny": true,"strictNullChecks": true}
}
// tsconfig.json:
{"extends": "./configs/base","files": ["main.ts", "supplemental.ts"]
}
// tsconfig.nostrictnull.json:
{"extends": "./tsconfig","compilerOptions": {"strictNullChecks": false}
}
3. 引用 - references
项目引用是将 TypeScript 程序分解成更小部分的一种方式。使用项目引用可以极大地改善构建和编辑器交互时间,强制执行组件之间的逻辑分离,并以新的改进方式组织代码。
4. 文件 - files
指定要包含在程序中的文件白名单。如果找不到任何文件,则会发生错误。
{"compilerOptions": {},"files": ["core.ts","sys.ts","types.ts","scanner.ts","parser.ts","utilities.ts","binder.ts","checker.ts","tsc.ts"]
}
四、 高级选项
skipLibCheck
跳过第三方库类型检查(提升编译速度) 。declaration
生成.d.ts
声明文件(库开发必备) 。incremental
增量编译(缓存提升速度)。
五、 文档地址
官方tsconfig.json文档地址https://www.typescriptlang.org/tsconfig/
中文版sconfig.json地址https://typescript.net.cn/tsconfig