tsconfig.json 是 TypeScript 项目的配置文件，用于指定编译选项和项目结构。通过配置 tsconfig.json，你可以控制 TypeScript 编译器的行为，例如目标 JavaScript 版本、模块系统、输出目录等。以下是配置 tsconfig.json 文件的详细步骤和常见选项。
1. 创建 tsconfig.json 文件
在项目根目录下创建一个 tsconfig.json 文件。你可以手动创建，或者使用 TypeScript 提供的初始化命令：
npx tsc --init
这将生成一个包含默认配置的 tsconfig.json 文件。
2. 基本配置选项
以下是一些常见的 tsconfig.json 配置选项及其含义：
compilerOptions
compilerOptions 是 tsconfig.json 中最重要的部分，用于配置 TypeScript 编译器的行为。
target
指定编译后的 JavaScript 目标版本。常见的值包括 ES3、ES5、ES6（即 ES2015）、ES2016、ES2017、ES2018、ES2019、ES2020、ESNext 等。
{
"compilerOptions": {
"target": "ES6"
}
}
module
指定模块系统。常见的值包括 CommonJS、AMD、System、UMD、ES6、ES2015、ES2020、ESNext 等。
{
"compilerOptions": {
"module": "CommonJS"
}
}
strict
启用所有严格类型检查选项。建议始终启用，以确保类型安全。
{
"compilerOptions": {
"strict": true
}
}
esModuleInterop
启用 ES 模块的互操作性。建议启用，以便更好地处理 CommonJS 和 ES 模块之间的互操作。
{
"compilerOptions": {
"esModuleInterop": true
}
}
outDir
指定编译后的 JavaScript 文件输出目录。
{
"compilerOptions": {
"outDir": "./dist"
}
}
rootDir
指定 TypeScript 源文件的根目录。通常设置为 src。
{
"compilerOptions": {
"rootDir": "./src"
}
}
include
指定需要编译的文件或目录。可以使用 glob 模式。
{
"include": ["src/**/*"]
}
exclude
指定不需要编译的文件或目录。可以使用 glob 模式。
{
"exclude": ["node_modules", "**/*.spec.ts"]
}
3. 完整示例
以下是一个完整的 tsconfig.json 文件示例：
{
"compilerOptions": {
"target": "ES6",
"module": "CommonJS",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
4. 其他常见选项
以下是一些其他常见的 compilerOptions 选项：
noImplicitAny
禁止隐式的 any 类型。建议启用，以确保类型安全。
{
"compilerOptions": {
"noImplicitAny": true
}
}
noUnusedLocals 和 noUnusedParameters
禁止未使用的局部变量和参数。建议启用，以减少代码冗余。
{
"compilerOptions": {
"noUnusedLocals": true,
"noUnusedParameters": true
}
}
sourceMap
生成源映射文件（.map 文件），用于调试 TypeScript 源代码。
{
"compilerOptions": {
"sourceMap": true
}
}
declaration
生成类型声明文件（.d.ts 文件），用于发布 TypeScript 库。
{
"compilerOptions": {
"declaration": true
}
}
jsx
指定 JSX 的处理方式。常见的值包括 preserve、react、react-jsx、react-jsxdev 等。
{
"compilerOptions": {
"jsx": "react"
}
}
5. 使用 extends
你可以使用 extends 选项来继承另一个 tsconfig.json 文件的配置。这在大型项目中非常有用，可以避免重复配置。
{
"extends": "./base-tsconfig.json",
"compilerOptions": {
"outDir": "./dist"
}
}
6. 使用 references
在大型项目中，你可以使用 references 选项来配置项目引用。这通常用于多包（monorepo）项目。
{
"references": [
{ "path": "../shared" },
{ "path": "../utils" }
]
}
总结
tsconfig.json 是 TypeScript 项目的配置文件，用于指定编译选项和项目结构。通过配置 compilerOptions、include、exclude 等选项，你可以控制 TypeScript 编译器的行为。理解这些配置选项的使用场景和语法，可以帮助你更好地管理和优化 TypeScript 项目。
