TSConfig 配置（tsconfig.json)

详细总结一下TSConfig 的相关配置项。个人笔记，仅供参考，欢迎批评指正！

另外，如果想了解更多ts相关知识，可以参考我的其他笔记：

• vue3+ts开发干货笔记
• ts相关笔记（基础必看）
• ts相关笔记（Partial、Required、Readonly、Record、Exclude、Extract）
• ts相关笔记（类型层级）
• ts相关笔记（extends、infer、Pick、Omit）

根目录

{
  /* 指定编译文件/目录 */
   "files": [], // 指定被编译的文件
  "include": [], // 指定被编译文件所在的目录
  "exclude": [], // 指定不需要被编译的目录
  /* 指定要继承的配置文件 */
  "extends": "",
  /* 编译配置选项 */
  "compilerOptions": {},
  /* 工程模式引用 */
  "references": [],
  /* 此配置让IDE在保存文件的时候根据tsconfig.json重新生成文件 */
  "compileOnSave": true
}

指定编译文件/目录

files、include 与 exclude

这三个选项决定了将被包括到本次编译的代码文件。
使用 files 我们可以描述本次包含的所有文件，但不能使用 src 或者 src/* 这种方式，每个值都需要是完整的文件路径，适合在小型项目时使用。
我们常用 include 和 exclude 进行配置，配置方式参考

{
  "include": ["src/**/*", "generated/*.ts", "internal/*"],
  "exclude": ["src/file-excluded", "/**/*.test.ts", "/**/*.e2e.ts"]
}

• src/**/* 表示匹配 src下所有的合法文件，而无视目录层级
• internal/* 则只会匹配 internal 下的文件，不会匹配 internal/utils/ 下的文件
• 在不包括文件扩展名（*.ts）的情况下只会匹配 .ts / .tsx / .d.ts / .js / .jsx 文件（js 和 jsx 文件需要启用 allowJs 配置时才会被包括）

extends— 配置继承

用extends属性从另一个配置文件里继承配置（覆盖当前），值是一个文件路径的字符串。
在原文件里的配置先被加载，然后被来自继承文件里的配置重写。 如果发现循环引用，则会报错。

来自所继承配置文件的files，include和exclude覆盖源配置文件的属性。

比如：

// configs/base.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

// tsconfig.json
{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

// tsconfig.nostrictnull.json
{
  "extends": "./tsconfig",
  "compilerOptions": {
    "strictNullChecks": false
  }
}

在最顶层设置compileOnSave标记，可以让IDE在保存文件的时候根据tsconfig.json重新生成文件，这个配置需要编译器支持。

！！！请注意，它（目前）并没有得到 Visual Studio Code 的支持。仅在 Visual Studio 2015 和安装了atom-typescript插件的Atom中得到了支持。而该插件和 Atom 均已停止维护

如下 👇

// tsconfig.nostrictnull.json
{
    "compileOnSave": true,
    "compilerOptions": {
        "noImplicitAny" : true
    }
}

references—工程引用

TypeScript 3.0的新特性，它支持将TypeScript程序的结构分割成更小的组成部分。
这样可以改善构建时间，强制在逻辑上对组件进行分离，更好地组织你的代码。

可以参考一下 element-plus 的应用

// tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.web.json" },
    { "path": "./tsconfig.play.json" },
    { "path": "./tsconfig.node.json" },
    { "path": "./tsconfig.vite-config.json" },
    { "path": "./tsconfig.vitest.json" }
  ]
}

compilerOptions—编译配置选项

可参考 typescript中文网

• [1] 这些选项是试验性的。
• [2] 这些选项只能在 tsconfig.json里使用，不能在命令行使用。