tsconfig.json 内容解读

tsconfig.json 文件是 TypeScript 项目的主要配置文件,用于指定编译选项和项目设置。通过这个文件,你可以控制编译器的行为,例如输出文件的路径、模块解析方式、严格类型检查等。

以下是一些常见的 tsconfig.json 属性及其详细解释:

顶层属性

1、compilerOptions
  • 包含编译器选项,用于控制编译过程。
javascript 复制代码
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}
2、include
  • 指定要包含在编译中的文件或文件夹。
  • 支持通配符(如 ***)。
javascript 复制代码
{
  "include": ["src/**/*"]
}
3、exclude
  • 指定要排除在编译之外的文件或文件夹。
  • 支持通配符(如 ***)。
javascript 复制代码
{
  "exclude": ["node_modules", "dist"]
}
4、files
  • 显式列出要包含在编译中的文件。
  • 不支持通配符。
javascript 复制代码
{
  "files": ["src/index.ts", "src/utils.ts"]
}
5、references
  • 用于项目引用,支持多项目构建。
javascript 复制代码
{
  "references": [
    { "path": "./src" },
    { "path": "./test" }
  ]
}
6、extends
  • 继承另一个 tsconfig.json 文件的配置。
javascript 复制代码
{
  "extends": "../tsconfig.base.json"
}

compilerOptions 属性

1、target
  • 指定编译后的 JavaScript 版本。
  • 常见值:es3, es5, es6(或 es2015),es2017, es2018, es2019, es2020, es2021, esnext
javascript 复制代码
"target": "es6"
2、module
  • 指定模块代码生成的方式。
  • 常见值:none, commonjs, amd, system, umd, es6(或 es2015),es2020, esnext
javascript 复制代码
"module": "commonjs"
3、outDir
  • 指定编译输出文件的目录。
javascript 复制代码
"outDir": "./dist"
4、rootDir
  • 指定源代码的根目录。
  • 编译器会根据这个目录来确定输出文件的相对路径。
javascript 复制代码
"rootDir": "./src"
5、strict
  • 启用所有严格的类型检查选项。
  • 包括 noImplicitAny, noImplicitThis, alwaysStrict, strictBindCallApply, strictFunctionTypes, strictNullChecks, strictPropertyInitialization
javascript 复制代码
"strict": true
6、esModuleInterop
  • 启用 CommonJS 和 ES 模块之间的互操作性。
javascript 复制代码
"esModuleInterop": true
7、skipLibCheck
  • 跳过对库文件的类型检查,可以加快编译速度。
javascript 复制代码
"skipLibCheck": true
8、forceConsistentCasingInFileNames
  • 确保文件名在导入时保持一致的大小写。
javascript 复制代码
"forceConsistentCasingInFileNames": true

9、resolveJsonModule:

  • 允许导入 JSON 模块。
javascript 复制代码
"resolveJsonModule": true
10、allowJs
  • 允许编译 JavaScript 文件。
javascript 复制代码
"allowJs": true
11、checkJs
  • 对 JavaScript 文件进行类型检查。
javascript 复制代码
"checkJs": true
12、declaration
  • 生成 .d.ts 声明文件。
javascript 复制代码
"declaration": true
13、sourceMap

生成源映射文件,便于调试。

javascript 复制代码
"sourceMap": true
14、noEmit
  • 不生成输出文件,仅进行类型检查。
javascript 复制代码
"noEmit": true
15、lib
  • 指定编译器可以使用的 JavaScript 标准库的列表。
  • 常见值:dom, dom.iterable, es5, es6, es2015, es2016, es2017, es2018, es2019, es2020, es2021, esnext
javascript 复制代码
"lib": ["dom", "es6"]
16、moduleResolution
  • 指定模块解析策略。
  • 常见值:node, classic
javascript 复制代码
"moduleResolution": "node"
17、baseUrl
  • 设置模块解析的基准目录。
javascript 复制代码
"baseUrl": "."
18、paths
  • 用于模块解析的路径映射。
javascript 复制代码
"paths": {
  "@src/*": ["src/*"],
  "@utils/*": ["src/utils/*"]
}
19、typeRoots
  • 指定类型声明文件的根目录。
javascript 复制代码
"typeRoots": ["./types", "./node_modules/@types"]

20、types

  • 指定全局类型声明文件。
javascript 复制代码
"types": ["node", "jest"]

21、noUnusedLocals

  • 报告未使用的局部变量。
javascript 复制代码
"noUnusedLocals": true

22、noUnusedParameters

  • 报告未使用的函数参数。
javascript 复制代码
"noUnusedParameters": true

23、noImplicitReturns

  • 报告函数中隐式的 any 类型返回值。
javascript 复制代码
"noImplicitReturns": true

24、noFallthroughCasesInSwitch

  • 报告 switch 语句中的 fall-through 情况。
javascript 复制代码
"noFallthroughCasesInSwitch": true

示例 tsconfig.json

javascript 复制代码
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": true,
    "declaration": true,
    "sourceMap": true,
    "noEmit": false,
    "lib": ["dom", "es6"],
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
      "@utils/*": ["src/utils/*"]
    },
    "typeRoots": ["./types", "./node_modules/@types"],
    "types": ["node", "jest"],
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

通过合理配置 tsconfig.json,可以更好地管理和控制 TypeScript 项目的编译过程,提高开发效率和代码质量。每个属性都有其特定的用途,可以根据项目的具体需求进行调整。

相关推荐
玲小珑几秒前
LangChain.js 完全开发手册(十五)实战综合项目一:智能文档处理系统
前端·langchain·ai编程
午安~婉1 分钟前
硅谷甄选(续2)首页
java·前端·javascript
NULL Not NULL2 分钟前
Vue 前端面试题(含答案)大全 v2025
前端·javascript·vue.js
苏州第一深情6 分钟前
终结加班眼酸?明基RD280U测评:程序员的双倍快乐,竟是4K护眼大屏给的!
前端·后端
i18nsite11 分钟前
互联网重构日记:1 - 开篇
前端·后端
洋不写bug12 分钟前
html表格,无序,有序,自定义,无语义,表单标签,特殊字符详解
前端·html
JarvanMo23 分钟前
Flutter. 适用于 GetX 5 的 CLI (命令行接口/工具)
前端
dyxal27 分钟前
VS Code 1.52.1 对应一些插件版本
前端·chrome
融化的雪39 分钟前
reactflow整理节点,尾节点位置的大坑
开发语言·前端·javascript
Gazer_S1 小时前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js