TypeScript tsconfig.json 配置详解与模板(基于 TypeScript 5.8.3)

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 启用所有严格类型检查选项(如 noImplicitAnystrictNullChecks 等)的快捷方式。推荐开启以提高类型安全性。
noImplicitAny boolean false 禁止隐式的 any 类型,强制为未指定类型的变量显式声明类型。
strictNullChecks boolean false 启用严格的空值检查,nullundefined 不可赋值给其他类型(除 anyunknown)。
strictFunctionTypes boolean false 启用严格的函数类型检查,确保函数参数类型更严格地匹配。
strictBindCallApply boolean false 严格检查 bindcallapply 方法的类型。
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 启用项目引用和增量编译,需配合 incrementaldeclaration

示例:高级选项

{
  "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"
  • 模块别名:通过 baseUrlpaths 简化导入路径。
  • 增量编译:启用 incrementalcomposite 提高编译性能。
  • 跳过库检查:设置 skipLibCheck: true 加快编译速度。
  • 声明文件:库开发时启用 declarationdeclarationMap

5. 注意事项

  • 配置继承:使用 extends 继承基础配置文件,减少重复。
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist"
  }
}
  • 环境兼容性:根据目标运行环境选择 targetlib
  • 调试支持:启用 sourceMap 以便在浏览器或 Node.js 中调试。

6. 资源与进一步学习