TypeScript tsconfig.json 配置
tsconfig.json 是 TypeScript 项目的配置文件，用于指定编译选项和项目设置。
基本配置
最基础的 tsconfig.json 文件。
实例
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"outDir": "./dist"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"outDir": "./dist"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
配置说明：
- target：编译目标 JavaScript 版本
- module：使用的模块系统
- strict：启用所有严格类型检查
- outDir：输出目录
编译目标版本
使用 target 指定编译到的 JavaScript 版本。
实例
// tsconfig.json
{
"compilerOptions": {
// ES3, ES5, ES6/ES2015, ES2020, ESNext
"target": "ES2020"
}
}
{
"compilerOptions": {
// ES3, ES5, ES6/ES2015, ES2020, ESNext
"target": "ES2020"
}
}
不同目标的输出差异：
// target: ES5 - 使用 var var greeting = "Hello"; // target: ES2020 - 使用 let/const let greeting = "Hello";
模块系统
配置模块化方案。
实例
{
"compilerOptions": {
"module": "commonjs",
// 可选: none, commonjs, amd, umd, es6, es2020, esnext
}
}
"compilerOptions": {
"module": "commonjs",
// 可选: none, commonjs, amd, umd, es6, es2020, esnext
}
}
严格模式
strict 选项启用所有严格类型检查。
实例
{
"compilerOptions": {
"strict": true,
// 等同于开启以下所有选项：
// "strictNullChecks": true,
// "noImplicitAny": true,
// "strictFunctionTypes": true,
// 等等
}
}
"compilerOptions": {
"strict": true,
// 等同于开启以下所有选项：
// "strictNullChecks": true,
// "noImplicitAny": true,
// "strictFunctionTypes": true,
// 等等
}
}
建议：始终启用 strict: true，这是最佳实践。
路径别名
配置路径别名简化导入。
实例
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"]
}
}
}
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"]
}
}
}
使用方式：
import Button from "@components/Button";
import { Header } from "@/components";
文件包含与排除
控制哪些文件包含在编译中。
实例
{
"include": ["src/**/*"],
"exclude": [
"node_modules",
"dist",
"**/*.test.ts",
"**/*.spec.ts"
]
}
"include": ["src/**/*"],
"exclude": [
"node_modules",
"dist",
"**/*.test.ts",
"**/*.spec.ts"
]
}
常用编译选项一览
| 选项 | 说明 |
|---|---|
| target | 编译目标版本 |
| module | 模块系统 |
| strict | 严格模式 |
| outDir | 输出目录 |
| rootDir | 源码根目录 |
| esModuleInterop | 允许 ES 模块互操作 |
| skipLibCheck | 跳过库检查 |
| declaration | 生成 .d.ts 声明文件 |
总结
- tsconfig.json：TypeScript 项目配置文件
- compilerOptions：编译选项核心配置
- include/exclude：控制文件范围
- 路径别名：简化导入路径
- strict: true：始终启用严格模式