配置文件

简介

TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript 项目的根目录。

通常 tsconfig.json 文件主要包含两部分内容：

• 指定待编译文件
• 定义编译选项

为什么需要tsconfig.json

通常我们可以使用 tsc 命令来编译少量 TypeScript 文件：

# --outFile // 编译后生成的文件名称
# --target  // 代码要编译成什么ECMAScript版本
# --module  // 模块方式，只有CommonJS和其他，就是improt和require，最终编译的代码要用哪种方式
# index.ts  // 源文件

$ tsc --outFile leo.js --target es3 --module amd index.ts

实际开发的项目，很少是只有单个文件，当我们需要编译整个项目时，就可以使用 tsconfig.json 文件，将需要使用到的配置都写进 tsconfig.json 文件，这样就不用每次编译都手动输入配置，另外也方便团队协作开发。

概览：

• files、exclude、include 用来配置需要编译哪些文件
• compilerOnSave 是指定 IDE 保存后是否重新编译的
• extends 用来扩展当前的配置，扩展配置文件中的字段会覆盖当前文件的相同字段
• typeAcquisition 用来指定某些库的类型声明文件
• watchOptions 用来配置 tsc 的监听策略
• reference 指定关联项目，从而提高编译速度

files

用来指定 TypeScript 项目中需要包含的文件列表。

用于表示由 ts 管理的 文件 的具体路径，可以是相对或绝对路径。这些文件内部有依赖的模块(或者引入了哪些模块)，编译器也会搜索到依赖模块进行编译。如果某些模块并没有在项目中引入，虽然在项目目录中也不会被编译。

类型：字符串数组

用例：

{
    "file":[
        
    ]
}

使用注意：

• files 中不支持 glob 匹配模式的路径
• 必须是指定文件，而不是某个文件夹，而且不能使用* ? * 等通配符
• 没有include选项，则默认会编译根目录以及所有子目录中的文件。
• 如果这里列出的路径必须是指定文件，而不是某个文件夹
• 如果项目非常小，那么我们可以使用 files指定项目的文件，否则更适合使用include指定项目文件。

include

用来指定需要包括在 TypeScript 项目中的文件或者文件匹配路径，如果我们指定了 files 配置项，则 include 的 默认值为 []，否则 include 默认值为 ["**/*"] ，即包含了目录下的所有文件。

一般来说，include 的默认值为.ts、.tsx 和 .d.ts。

类型：字符串数组

用例：

• * 匹配0或多个字符（不包括目录分隔符）
• ? 匹配一个任意字符（不包括目录分隔符）
• **/ 递归匹配任意子目录

{
    "include":[
        ".ts",".tsx",".d.ts"
    ]
}

使用注意：

• 这三者的优先级是这样的：files > exclude > include
• 如果我们开启了 allowJs 选项，还包括 .js 和 .jsx 文件。
• 如果 glob 匹配的文件中没有包含文件的扩展名，则只有 files 支持的扩展名会被包含。

exclude

用来指定解析 include 配置中需要跳过的文件或者文件匹配路径。

一般来说，exclude 的默认值为 ["node_modules", "bower_components", "jspm_packages"]

类型：字符串数组

用例：

• * 匹配0或多个字符（不包括目录分隔符）
• ? 匹配一个任意字符（不包括目录分隔符）
• **/ 递归匹配任意子目录

{
    "exclude":[
        "node_modules", "bower_components", "jspm_packages","outDir"
    ]
}

注意：

• 这三者的优先级是这样的：files > exclude > include
• 如果不指定 files，项目目录下的所有文件都会被编译器编译
• 如果同一个文件在三者中均指定，此文件一定会被编译器编译，而 files 中不指定而在 exclude、include 中同时指定的文件也会被编译，因为优先级是这样的 exclude > include 。
• exclude默认情况下会排除node_modules，bower_components，jspm_packages 和 outDir 目录。

entends

官方参考

它的配置项的值是一个字符串，用来声明当前配置需要继承的另外一个配置的路径，这个路径使用 Node.js 风格的解析模式。

TypeScript 首先会加载 extends 的配置文件，然后使用当前的 tsconfig.json 文件里的配置覆盖继承的文件里的配置。

TypeScript 会基于当前 tsconfig.json 配置文件的路径解析所继承的配置文件中出现的相对路径。

类型：字符串数组

安装:

npm i -D @tsconfig/node16

用例：

// https://github.com/tsconfig/bases/tree/main/bases
{
    "extends": "@tsconfig/node12/tsconfig.json",
    "extends": "@tsconfig/node16/tsconfig.json",
}

typeAcquisition

用来指定某些库的类型声明文件

acquisition 翻译过来是 “获得物、获得” 的意思。在整个项目中，如果存在用JavaScript写的库，ts 会自动去 compilerOptions.typeRoots 指定的目录中寻找对应的类型声明文件。这个行为被称为 typeAcquisition (类型获得)。

这个行为可以通过enable来开启或关闭，且以库级别来指定应用的范围。在实践中，通过指定 enable 的值去控制这个行为并未有明显的感官，即使使用 vscode 修改配置后重启也并未生效。

当使用 jquery 做测试的时候，将 enable 设为 false 且下载了 @types/jquery 的时候，vscode 并未提示无法找到该声明，也无任何报错。但当我将其设为 true，且删除 @types/jquery时，vscode 仍未提示无法找到该声明，鼠标悬浮引入的 jquery 提示在全局的 typescript/3.8/node_modules/@types/ 目录下找到了该声明。

类型：对象

用例：

"typeAcquisition": {
  "jquery": "@/types/jquery"
}

注意：

• 这个配置项在平时的开发中并不常用，可以不深究。

reference

3.0

官方描述：

项目引用是 TypeScript 3.0的新特性，它支持将 TypeScript 程序的结构分割成更小的组成部分。

假设我们要开发一个类似于 lodash 的工具库，并在项目中使用，而且后期很有可能还要在业界推广。为了保证这个工具的顺利开发及推广，我们必须要做相应的单元测试。那这个工具库可以看做一个项目，对其中的每个功能的测试也可作为一个独立的项目。但整个过程中，工具库的开发和测试应该是属于同一个项目下 “分项目” 的。那这种情况下 reference 就很棒了。首先我们搭一个目录出来：

|---- src/
    |---- index.ts    # 整个工具库的入口
    |---- copyDeep.ts # 其中定义了copyDeep方法
|---- test/
    |---- copyDeep.test.ts # copyDeep的单元测试
|---- package.json
|---- tsconfig.json

在 copyDeep.test.ts 中肯定要引用 src/copyDeep，也就是说 test 的项目是依赖于 src 的。如果 src 中的代码发生了变化，整个工具库项目应该重新编译，而 test 项目不应该再被编译，这本来就是合理的。如果 test 项目中的代码发生了变化，那 test 项目应该被重新编译，而 src 项目不应该再被编译。如何在一个项目中配置而做到分别编译相应的子项目呢？首先最先想到的应该是在 tsconfig.json 文件中引入 include 字段配置，我们先尝试一下下面的配置：

{
    "files": [
        "./src/index.ts"
    ],
    "include": [
        "./test/**/*.test.ts"
    ],
    "compilerOptions": {
        "outDir": "./dist/"
    }
}

我们来分析这样配置的会有哪些问题：

1. 首先，从整个项目层面，确实做到了修改任意文件重新编译的功能。但注意，编译的是全量的 ts 文件。
2. 随着日后项目的增大，在 *.test.ts 文件中引入也将逐渐变大。
3. 修改了 src//**/*.ts 的内容，test/**/*.ts 也将作为输出，这是我们不希望看到的。

并修改为以下配置：

// 根目录下的 /tsconfig.json
{
    "compilerOptions": {
        "declaration": true, // 为子项目生成.d.ts声明文件
        "outDir": "./dist",
    }
}

// src目录下的 /src/tsconfig.json
{
    "extends": "../tsconfig",
    "compilerOptions": {
        "composite": true // 必须设置为true，表明该文件夹为一个子项目
    }
}

// test目录下的 /src/tsconfig.json
{
    "extends": "../tsconfig",
    "references": [
        { "path": "../src" } // 表示引用了工具库项目
    ]
}

这样配置后，如果 src 项目已经编译完成并且输出了编译后的文件， 那在 test 项目中，实际加载的是 src 项目声明的 .d.ts 文件，而且这个声明文件是对 test 项目可见的。另外，如果开启了 watch 模式，修改了内容只会编译相应的项目而不会全量编译。这会显著的加速类型检查和编译，减少编辑器的内存占用。而且在代码结构层命有了一个很清晰的规划。

总结来讲，refrence 的作用是将两个项目关联起来作为一个项目开发，当某个项目代码修改后还能单独编译相应的项目而不是整个项目。再说的简单点，就是实现了关联项目间的懒编译。

compilerOptions

编译选项是 TypeScript 配置的核心部分，compilerOptions 内的配置根据功能可以分为 6 个部分

1、项目选项

这些选项用于配置项目的运行时期望、转译 JavaScript 的输出方式和位置，以及与现有 JavaScript 代码的集成级别。

一、基本选项	说明
"target": "es5",	指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
"module": "commonjs",	编译后的代码格式：指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
"lib": [],	指定要包含在编译中的库文件
"allowJs": true,	允许编译 javascript 文件
"checkJs": true,	报告 javascript 文件中的错误
"jsx": "preserve",	指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
"declaration": true,	生成相应的 '.d.ts' 文件
"sourceMap": true,	生成相应的 '.map' 文件
"outFile": "./",	将输出文件合并为一个文件
"outDir": "./",	指定输出目录
"rootDir": "./",	用来控制输出目录结构 --outDir.
"removeComments": true,	删除编译后的所有的注释
"noEmit": true,	不生成输出文件
"importHelpers": true,	从 tslib 导入辅助工具函数
"isolatedModules": true,	将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）.
二、严格的类型检查选项
"strict": true,	启用所有严格类型检查选项
"noImplicitAny": true,	在表达式和声明上有隐含的 any类型时报错
"strictNullChecks": true,	启用严格的 null 检查
"noImplicitThis": true,	当 this 表达式值为 any 类型的时候，生成一个错误
"alwaysStrict": true,	以严格模式检查每个模块，并在每个文件里加入 'use strict'
三、额外的检查
"noUnusedLocals": true,	有未使用的变量时，抛出错误
"noUnusedParameters": true,	有未使用的参数时，抛出错误
"noImplicitReturns": true,	并不是所有函数里的代码都有返回值时，抛出错误
"noFallthroughCasesInSwitch": true,	报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）
四、模块解析选项
"moduleResolution": "node",	选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
"baseUrl": "./",	用于解析非相对模块名称的基目录
"paths": {},	模块名到基于 baseUrl 的路径映射的列表
"rootDirs": [],	根文件夹列表，其组合内容表示项目运行时的结构内容
"typeRoots": [],	包含类型声明的文件列表
"types": [],	需要包含的类型声明文件名列表
"allowSyntheticDefaultImports": true,	允许从没有设置默认导出的模块中默认导入。
五、Source Map Options
"sourceRoot": "./",	指定调试器应该找到 TypeScript 文件而不是源文件的位置
"mapRoot": "./",	指定调试器应该找到映射文件而不是生成文件的位置
"inlineSourceMap": true,	生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
"inlineSources": true,	将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性
五、其他选项
"experimentalDecorators": true,	启用装饰器
"emitDecoratorMetadata": true	为装饰器提供元数据的支持

"compilerOptions": {

  /* 基本选项 */
  "target": "es5",                       // 代码要编译成什么ECMAScript版本
                                      // 'ES3' (default), 'ES5', 'ES6'/'ES2015' ，'ES2016', 'ES2017', or 'ESNEXT'
  "module": "commonjs",                  // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
  "lib": [],                             // 指定要包含在编译中的库文件
  "allowJs": true,                       // 允许编译 javascript 文件
  "checkJs": true,                       // 报告 javascript 文件中的错误
  "jsx": "preserve",                     // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
  "declaration": true,                   // 生成相应的 '.d.ts' 文件
  "sourceMap": true,                     // 生成相应的 '.map' 文件
  "outFile": "./",                       // 将输出文件合并为一个文件
  "outDir": "./",                        // 指定输出目录
  "rootDir": "./",                       // 用来控制输出目录结构 --outDir.
  "removeComments": true,                // 删除编译后的所有的注释
  "noEmit": true,                        // 不生成输出文件
  "importHelpers": true,                 // 从 tslib 导入辅助工具函数
  "isolatedModules": true,               // 将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）.

  /* 严格的类型检查选项 */
  "strict": true,                        // 启用所有严格类型检查选项
  "noImplicitAny": true,                 // 在表达式和声明上有隐含的 any类型时报错
  "strictNullChecks": true,              // 启用严格的 null 检查
  "noImplicitThis": true,                // 当 this 表达式值为 any 类型的时候，生成一个错误
  "alwaysStrict": true,                  // 以严格模式检查每个模块，并在每个文件里加入 'use strict'

  /* 额外的检查 */
  "noUnusedLocals": true,                // 有未使用的变量时，抛出错误
  "noUnusedParameters": true,            // 有未使用的参数时，抛出错误
  "noImplicitReturns": true,             // 并不是所有函数里的代码都有返回值时，抛出错误
  "noFallthroughCasesInSwitch": true,    // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）

  /* 模块解析选项 */
  "moduleResolution": "node",            // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
  "baseUrl": "./",                       // 用于解析非相对模块名称的基目录
  "paths": {},                           // 模块名到基于 baseUrl 的路径映射的列表
  "rootDirs": [],                        // 根文件夹列表，其组合内容表示项目运行时的结构内容
  "typeRoots": [],                       // 包含类型声明的文件列表
  "types": [],                           // 需要包含的类型声明文件名列表
  "allowSyntheticDefaultImports": true,  // 允许从没有设置默认导出的模块中默认导入。

  /* Source Map Options */
  "sourceRoot": "./",                    // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
  "mapRoot": "./",                       // 指定调试器应该找到映射文件而不是生成文件的位置
  "inlineSourceMap": true,               // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
  "inlineSources": true,                 // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性

  /* 其他选项 */
  "experimentalDecorators": true,        // 启用装饰器
  "emitDecoratorMetadata": true          // 为装饰器提供元数据的支持

"compilerOptions": {
/*  Basic Options  */
"target": "es5", // target用于指定编译之后的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. ,
"module": "commonjs", // 用来指定要使用的模块标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. ,
"lib": ["es6", "dom"], // lib用于指定要包含在编译中的库文件 ,
"allowJs": true, // allowJs设置的值为true或false，用来指定是否允许编译js文件，默认是false，即不编译js文件 
"checkJs": true, // checkJs的值为true或false，用来指定是否检查和报告js文件中的错误，默认是false 
"jsx": "preserve", // 指定jsx代码用于的开发环境: 'preserve', 'react-native', or 'react'. 
"declaration": true, // declaration的值为true或false，用来指定是否在编译的时候生成相应的".d.ts"声明文件。如果设为true，编译每个ts文件之后会生成一个js文件和一个声明文件。但是declaration和allowJs不能同时设为true 
"declarationMap": true, // 值为true或false，指定是否为声明文件.d.ts生成map文件 
"sourceMap": true, // sourceMap的值为true或false，用来指定编译时是否生成.map文件 
"outFile": "./", // outFile用于指定将输出文件合并为一个文件，它的值为一个文件路径名。比如设置为"./dist/main.js"，则输出的文件为一个main.js文件。但是要注意，只有设置module的值为amd和system模块时才支持这个配置 
"outDir": "./", // outDir用来指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹 
"rootDir": "./", // 用来指定编译文件的根目录，编译器会在根目录查找入口文件，如果编译器发现以rootDir的值作为根目录查找入口文件并不会把所有文件加载进去的话会报错，但是不会停止编译 
"composite": true, // 是否编译构建引用项目  
"incremental": true, // 是否启用增量编译
"tsBuildInfoFile": "./", // 指定文件用来存储增量编译信息 
"removeComments": true, // removeComments的值为true或false，用于指定是否将编译后的文件中的注释删掉，设为true的话即删掉注释，默认为false 
"noEmit": true, // 不生成编译文件，这个一般比较少用 
"importHelpers": true, // importHelpers的值为true或false，指定是否引入tslib里的辅助工具函数，默认为false 
"downlevelIteration": true, // 当target为'ES5' or 'ES3'时，为'for-of', spread, and destructuring'中的迭代器提供完全支持 
"isolatedModules": true, // isolatedModules的值为true或false，指定是否将每个文件作为单独的模块，默认为true，它不可以和declaration同时设定 
 "resolveJsonModule": true,//是否允许把json文件当做模块进行解析


/* Strict Type-Checking Options */
"strict": true, // strict的值为true或false，用于指定是否启动所有类型检查，如果设为true则会同时开启下面这几个严格类型检查，默认为false ,
"noImplicitAny": true, // noImplicitAny的值为true或false，如果我们没有为一些值设置明确的类型，编译器会默认认为这个值为any，如果noImplicitAny的值为true的话。则没有明确的类型会报错。默认值为false 
"strictNullChecks": true, // strictNullChecks为true时，null和undefined值不能赋给非这两种类型的值，别的类型也不能赋给他们，除了any类型。还有个例外就是undefined可以赋值给void类型 
"strictFunctionTypes": true, // strictFunctionTypes的值为true或false，用于指定是否使用函数参数双向协变检查 
"strictBindCallApply": true, // 设为true后会对bind、call和apply绑定的方法的参数的检测是严格检测的 
"strictPropertyInitialization": true, // 设为true后会检查类的非undefined属性是否已经在构造函数里初始化，如果要开启这项，需要同时开启strictNullChecks，默认为false 
"noImplicitThis": true, // 当this表达式的值为any类型的时候，生成一个错误 
"alwaysStrict": true, // alwaysStrict的值为true或false，指定始终以严格模式检查每个模块，并且在编译之后的js文件中加入"use strict"字符串，用来告诉浏览器该js为严格模式 


/* Additional Checks */
"noUnusedLocals": true, // 用于检查是否有定义了但是没有使用的变量，对于这一点的检测，使用eslint可以在你书写代码的时候做提示，你可以配合使用。它的默认值为false 
"noUnusedParameters": true, // 用于检查是否有在函数体中没有使用的参数，这个也可以配合eslint来做检查，默认为false 
"noImplicitReturns": true, // 用于检查函数是否有返回值，设为true后，如果函数没有返回值则会提示，默认为false 
"noFallthroughCasesInSwitch": true, // 用于检查switch中是否有case没有使用break跳出switch，默认为false 


/* Module Resolution Options */
"moduleResolution": "node", // 用于选择模块解析策略，有'node'和'classic'两种类型' '对应'
"baseUrl": "./", // baseUrl用于设置解析非相对模块名称的基本目录，相对模块不会受baseUrl的影响 
"paths": {}, // 用于设置模块名称到基于baseUrl的路径映射 
"rootDirs": [], // rootDirs可以指定一个路径列表，在构建时编译器会将这个路径列表中的路径的内容都放到一个文件夹中 
"typeRoots": [], // typeRoots用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载 
"types": [], // types用来指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载进来 
"allowSyntheticDefaultImports": true, // 用来指定允许从没有默认导出的模块中默认导入 
"esModuleInterop": true, // 通过为导入内容创建命名空间，实现CommonJS和ES模块之间的互操作性 ,
"preserveSymlinks": true, // 不把符号链接解析为其真实路径，具体可以了解下webpack和nodejs的symlink相关知识 


/* Source Map Options */
"sourceRoot": "", // sourceRoot用于指定调试器应该找到TypeScript文件而不是源文件位置，这个值会被写进.map文件里 
"mapRoot": "", // mapRoot用于指定调试器找到映射文件而非生成文件的位置，指定map文件的根路径，该选项会影响.map文件中的sources属性 
"inlineSourceMap": true, // 指定是否将map文件的内容和js文件编译在同一个js文件中，如果设为true，则map的内容会以//# sourceMappingURL=然后拼接base64字符串的形式插入在js文件底部 
"inlineSources": true, // 用于指定是否进一步将.ts文件的内容也包含到输入文件中 


/* Experimental Options */
"experimentalDecorators": true, // 用于指定是否启用实验性的装饰器特性 
"emitDecoratorMetadata": true, // 用于指定是否为装饰器提供元数据支持，关于元数据，也是ES6的新标准，可以通过Reflect提供的静态方法获取元数据，如果需要使用Reflect的一些方法，需要引入ES2015.Reflect这个库 
},
"files": [], // files可以配置一个数组列表，里面包含指定文件的相对或绝对路径，编译器在编译的时候只会编译包含在files中列出的文件，如果不指定，则取决于有没有设置include选项，如果没有include选项，则默认会编译根目录以及所有子目录中的文件。这里列出的路径必须是指定文件，而不是某个文件夹，而且不能使用* ? * 等通配符
"include": [], // include也可以指定要编译的路径列表，但是和files的区别在于，这里的路径可以是文件夹，也可以是文件，可以使用相对和绝对路径，而且可以使用通配符，比如"./src"即表示要编译src文件夹下的所有文件以及子文件夹的文件
"exclude": [], // exclude表示要排除的、不编译的文件，它也可以指定一个列表，规则和include一样，可以是文件或文件夹，可以是相对路径或绝对路径，可以使用通配符
"extends": "", // extends可以通过指定一个其他的tsconfig.json文件路径，来继承这个配置文件里的配置，继承来的文件的配置会覆盖当前文件定义的配置。TS在3.2版本开始，支持继承一个来自Node.js包的tsconfig.json配置文件
"compileOnSave": true, // compileOnSave的值是true或false，如果设为true，在我们编辑了项目中的文件保存的时候，编辑器会根据tsconfig.json中的配置重新生成文件，不过这个要编辑器支持
"references": [], // 一个对象数组，指定要引用的项目

typeRoots 与 types

TypeScript 会默认引入node_modules下的所有@types声明，但是开发者也可以通过修改tsconfig.json的配置来修改默认的行为.

tsconfig.json 中有两个配置和类型引入有关：

• typeRoots: 用来指定默认的类型声明文件查找路径，默认为node_modules/@types, 指定typeRoots后，TypeScript 编译器会从指定的路径去引入声明文件，而不是node_modules/@types, 比如以下配置会从typings路径下去搜索声明：

  { "compilerOptions": { "typeRoots": ["./typings"] }}

• types: TypeScript 编译器会默认引入typeRoot下所有的声明文件，但是有时候我们并不希望全局引入所有定义，而是仅引入部分模块。这种情景下可以通过types指定模块名只引入我们想要的模块，比如以下只会引入 jquery 的声明文件：

  { "compilerOptions": { "types": ["jquery"] }}

小结：

1. typeRoots 是 tsconfig 中 compilerOptions 的一个配置项，typeRoots 下面的包会被 ts 编译器自动包含进来，typeRoots 默认指向 node_modules/@types。
2. types 和 typeRoots 一样也是 compilerOptions 的配置，指定 types 后，typeRoots 下只有被指定的包才会被引入。
3. @types 是 npm 的 scope 命名空间，和@babel 类似，@types 下的所有包会默认被引入，你可以通过修改 compilerOptions 来修改默认策略。

lib

默认值：

• --target 选项为 es5 时，默认导入 es5, dom, scripthost
• --target 选项为 es6 时，默认导入 es6, dom, dom.iterable, scripthost

target

示例1：{"target":"es5"}

• 原始代码使用了 const

const count = 9;

• "target":"es5" 配置时，最终文件的编译代码

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var a = 8;

• "target":"es6" 配置时，最终文件的编译代码

const a = 1;
export {};

示例2：：{"target":"es2020"}

• 原始代码使用es2020语法

const a = { name: 'fnn', age: 18 }

const b = a?.age

• "target":"es6" 配置时，最终文件的编译代码

const a = { name: 'fnn', age: 18 }

const b = a === null || a === void 0 ? void 0 : a.age;
export {};

• "target":"es2020" 配置时，最终文件的编译代码

const a = { name: 'fnn', age: 18 };

const b = a?.age;
export {};

小结

• 设置 target 为什么版本要取决于当前开发的项目需要兼容到什么版本的浏览器（浏览器对 ES 兼容到哪一个版本），所以不能轻易的设置为 esnext，以及其他新的版本。

推荐配置

项目	target	备注
Vue2项目、需要兼容ie9或者以下浏览器的	es5
Vue3项目、仅兼容ie11或者不考虑ie和旧版浏览器的	ESNext、ES{当前年份}
Electron项目	ESNext

module

esModuleInterop

watchOptions

官方文档

typescript3.8 以上新增加的配置，用来配置使用哪种监听策略来跟踪文件和目录。

由于 tsc 的监听文件机制依赖于 node 的 fs.watch/fs.watchFile。这两种方法的实现并不相同，前者是采用文件系统的事件做到通知，而后者使用轮询的机制。更多可以查阅 node 官方文档。

类型：对象

用例：

{
    "watchOptions":{
        "watchFile":"useFsEvents",
        "watchDirectory":"useFsEvents"
        "fallbackPolling":
        "synchronousWatchDirectory":
        "excludeFiles":
        "excludeDirectories":
    }
}

• watchFile

  字符串类型，配置单个文件的监听策略，必须为一下几个值：

  • useFsEvents(默认)：采用系统的文件系统的原生事件机制监听文件更改

  • useFsEventsOnParentDirectory：采用系统的文件系统的原生事件机制监听修改文件所在的目录，这样修改一个文件实际上监听的是此文件所在的目录都被监听了，如此整个项目的文件监听器将显著减少，但可能导致监听并不准确。

  • dynamicPriorityPolling：创建一个动态队列去监听文件，修改频率较低的文件将被减少轮询监听的频率。

  • fixedPollingInterval：固定间隔的检查每个文件是否发生变化。

  • priorityPollingInterval：固定间隔的检查每个文件是否发生变化，但使用启发式监听的文件的检查频率要低于非启发式监听的文件。

• watchDirectory

  字符串类型，配置监听目录的策略，必须为以下几个值：

  • useFsEvents(默认)
  • dynamicPriorityPolling
  • fixedPollingInterval

  以上三个和 watchFile 中相差不多

• fallbackPolling

  当采用系统的文件系统中原生事件机制监听文件时，此选项指定本机的文件监听器被耗尽或者不支持本机文件监听器是编译器采用的轮询策略，可以设置为以下几个值：

  • fixedPollingInterval
  • dynamicPriorityPolling
  • priorityPollingInterval
  • synchronousWatchDirectory：禁用对目录的延迟监听。如果有大量的文件更改，比如在 npm install 时 node_modules 目录发生的变化，延迟监听是非常有用的。但总有些不常见的场景需要禁用延迟监听。

• synchronousWatchDirectory

  布尔类型，是否对目录延迟监听。如果配置为 true ，当文件发生修改时同步的调用回调并更新目录监听器。

• excludeFiles

  字符串数组，用于指定不需要被监听变化的文件

• excludeDirectories

  字符串数组，用于指定不需要被监听变化的目录

参阅资料

• 如何配置tsconfig.json
• https://juejin.cn/post/6844904178234458120
• https://juejin.cn/post/7011887191013982216 - 未看完