tsconfig.json的作用: 无需每次编译都在命令行去输入配置参数, 对参数进行统一管理

可以通过tsc --init 生成初始配置文件 tsconfig.json

根字段说明

官方字段说明

tsconfig.json官方支持6个顶级配置, 分别为

• compilerOptions: 编译选项
• files: 编译文件范围
• include: 编译文件匹配规则列表
• exclude: 忽略文件列表
• extends: 继承配置
• references: 引用配置

compilerOptions

在tsc --init生成的tsconfig.json中, 涵盖了大部分常用的编译选项.

基础选项

• target: 项目编译目标
  ‘ES3’ (default), ‘ES5’, ‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’, ‘ES2020’, ‘ES2021’, or ‘ESNEXT’
• module: 模块化规范
  • none
  • commonjs
  • amd
  • system
  • umd
  • es2015
  • es2020
  • ESNext

files

用于表明当前项目的待编译文件范围, 如果你的项目中有一大堆文件, 但是你只想编译其中的几个, 可以使用该配置

{
  "files": [
    "yourFile.ts"
  ]
}

include

用于表明哪些文件是应该被包含进项目中.

{
  "include": [
    "src/**/*"
  ]
}

exclude

用于在include中排除文件, 如果设置的表达式本就不在include的范围内, 则无意义

{
  "exclude": [
    "dist/**/*"
  ]
}

extends

用于继承其他配置文件中除了引用reference之外的配置

同名配置使用当前文件值

tsconfig.base.json

{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

tsconfig.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "noImplicitAny": false,
    "strict": true
  }
}

这样tsconfig.json实际的内容为

{
  "compilerOptions": {
    "noImplicitAny": false,
    "strict": true
  }
}

references

TypeScript 3.x新特性, 可以让我们缩短构建时间, 可以让你按照功能/组件逻辑拆分项目

比如你的项目中分别有需要构建为CommonJS的模块和UMD模块, 这时你要构建项目需要执行两次tsc, 因为他们的构建目标不同,
tsconfig配置文件也至少有两个

但是有了references之后, 一些共通的配置可以写入一个tsconfig.json中,
然后将两个模块不同的配置分别写到a.tsconfig.json与b.tsconfig.json中,
再在tsconfig.json中配置, 引用这两个配置文件.

这样就可以tsc一次构建两个不同配置的模块了

编译使用的 tsconfig.json 需要开启 composite 和 declaration 编译选项

{
  "compilerOptions": {
    "strict": true,
    "composite": true
  },
  "references": [
    {
      "path": "a/a.config.json",
    },
    {
      "path": "b/b.config.json"
    }
  ]
}

与extends不同的是, extends继承其他配置文件后最终编译使用的只是合并配置之后的一个配置文件

而references 是同时使用多个配置文件