tsconfig.json配置详解
tsconfig.json⽂件说明
⼀般在typescript的项⽬中，我们都能看到tsconfig.json这个⽂件，它指定了此项⽬的编译选项，也指定了此项⽬的根⽬录，因此这个⽂件⼀般也是在项⽬的根⽬录下。既然如此，就单单typescript项⽬⽽⾔，它的编译⼀般有以下⼏种⽅式：
命令⾏直接输⼊tsc命令不带任何参数进⾏编译：
此时编译器会从当前⽬录开始查tsconfig.json⽂件，如果当前⽬录没有发现该⽂件，则逐级向⽗级⽬录搜索。如果⼀直没有检索到该⽂件，编译器会给出使⽤提⽰。
命令⾏调⽤tsc带参数--project(或 -p)⽽指定⼀个⽬录：
编译器直接在该⽬录下查tsconfig.json⽂件，如果没到则报错。
命令⾏调⽤tsc后直接指定⽂件：
直接编译指定的⽂件。
1. files
数组类型，⽤于表⽰由ts管理的⽂件的具体路径，可以是相对或绝对路径。这些⽂件内部有依赖的模块(或者引⼊了哪些模块)，编译器也会搜索到依赖模块进⾏编译。如果某些模块并没有在项⽬中引⼊，虽然在项⽬⽬录中也不会被编译。需要注意的是，files中不⽀持glob匹配模式的路径。
2. include 与 exclude
数组类型，include⽤于表⽰ts管理的⽂件。exclude⽤于表⽰ts排除的⽂件(即不被编译的⽂件)。其中的⽂件列表可以使⽤glob匹配模式列表，⽀持的glob通配符有：
*匹配0或多个字符（不包括⽬录分隔符）
?匹配⼀个任意字符（不包括⽬录分隔符）
**/递归匹配任意⼦⽬录
注意，这三者的优先级是这样的：files > exclude > include。如果不指定files，项⽬⽬录下的所有⽂件都会被编译器编译。如果同⼀个⽂件在三者中均指定，此⽂件⼀定会被编译器编译。⽽files中不指定⽽在exclude、include中同时指定的⽂件也会被编译，因为优先级是这样的exclude > include。另外，exclude默认情况下会排除node_modules，bower_components，jspm_packages和outDir⽬录。
3. compileOnSave
布尔类型，可以让IDE在保存⽂件的时候根据tsconfig.json重新⽣成编译后的⽂件。
4. extends
字符串类型，该值是⼀个路径，指定另⼀个配置⽂件⽤于继承tsconfig.json中的配置。在原⽂件⾥的配置最先被加载，原⽂件⾥的配置被继承⽂件⾥的同名配置所重写。如果发现循环引⽤，则会报错。
5. typeAcquisition
对象类型，设置⾃动引⼊库类型定义⽂件。acquisition翻译过来是 “获得物、获得” 的意思。在整个项⽬中，如果存在⽤JavaScript写的库，ts会⾃动去peRoots指定的⽬录中寻对应的类型声明⽂件。这个⾏为被称为typeAcquisition (类型获得)。这个⾏为可以通
过enable来开启或关闭，且以库级别来指定应⽤的范围。但我在实践中，通过指定enable的值去控制这个⾏为并未有明显的感官，即使使
⽤vscode修改配置后重启也并未⽣效。
当我使⽤jquery做测试的时候，将enable设为false且下载了@types/jquery的时候，vscode并未提⽰⽆法到该声明，也⽆任何报错。但当我将其设为true，且删除@types/jquery时，vscode仍未提⽰⽆法到该声明，⿏标悬浮引⼊的jquery提⽰在全局
的typescript/3.8/node_modules/@types/⽬录下到了该声明。
这个配置项在平时的开发中并不常⽤，⼤家也不必深究。
6. watchOptions
对象类型，typescript3.8以上新增加的配置，⽤来配置使⽤哪种监听策略来跟踪⽂件和⽬录。由于tsc的监听⽂件机制依赖
于node的fs.watch/fs.watchFile。这两种⽅法的实现并不相同，前者是采⽤⽂件系统的事件做到通知，⽽后者使⽤轮询的机制。更多可以查
阅node官⽅⽂档。
1. watchFile
字符串类型，配置单个⽂件的监听策略，必须为⼀下⼏个值：
useFsEvents(默认)：采⽤系统的⽂件系统的原⽣事件机制监听⽂件更改
useFsEventsOnParentDirectory：采⽤系统的⽂件系统的原⽣事件机制监听修改⽂件所在的⽬录，这样修改⼀个⽂件实际上监听的是此⽂件所在的⽬录都被监听了，如此整个项⽬的⽂件将显著减少，但可能导致监听并不准确。
dynamicPriorityPolling：创建⼀个动态队列去监听⽂件，修改频率较低的⽂件将被减少轮询监听的频率。
fixedPollingInterval：固定间隔的检查每个⽂件是否发⽣变化。
priorityPollingInterval：固定间隔的检查每个⽂件是否发⽣变化，但使⽤启发式监听的⽂件的检查频率要低于⾮启发式监听的⽂件。
2. watchDirectory
字符串类型，配置监听⽬录的策略，必须为以下⼏个值：
useFsEvents(默认)
dynamicPriorityPolling
fixedPollingInterval
以上三个和watchFile中相差不多
3. fallbackPolling
当采⽤系统的⽂件系统中原⽣事件机制监听⽂件时，此选项指定本机的⽂件被耗尽或者不⽀持本机⽂件是编译器采⽤的轮询策略，可以设置为以下⼏个值：
fixedPollingInterval
dynamicPriorityPolling
priorityPollingInterval
synchronousWatchDirectory：禁⽤对⽬录的延迟监听。如果有⼤量的⽂件更改，⽐如在npm install时node_modules⽬录发⽣的变化，延迟监听是⾮常有⽤的。但总有些不常见的场景需要禁⽤延迟监听。
4. synchronousWatchDirectory
布尔类型，是否对⽬录延迟监听。如果配置为true，当⽂件发⽣修改时同步的调⽤回调并更新⽬录监
听器。
5. excludeFiles
字符串数组，⽤于指定不需要被监听变化的⽂件
6. excludeDirectories
字符串数组，⽤于指定不需要被监听变化的⽬录
7. reference
项⽬引⽤是TypeScript 3.0的新特性，它⽀持将TypeScript程序的结构分割成更⼩的组成部分。
这是typescript官⽹中的描述，那怎么理解这句话呢。我们通过⼀个场景认识新出这种的reference特性。
假设我们要开发⼀个类似于lodash的⼯具库，并在项⽬中使⽤，⽽且后期很有可能还要在业界推⼴。为了保证这个⼯具的顺利开发及推⼴，我们必须要做相应的单元测试。那这个⼯具库可以看做⼀个项⽬，对其中的每个功能的测试也可作为⼀个独⽴的项⽬。但整个过程中，⼯具库的开发和测试应该是属于同⼀个项⽬下 “分项⽬” 的。那这种情况下reference就很棒了。⾸先我们搭⼀个⽬录出来：
|---- src/
|---- index.ts    // 整个⼯具库的⼊⼝
|---- copyDeep.ts // 其中定义了copyDeep⽅法
|---- test/
|---- st.ts // copyDeep的单元测试
|---- package.json
|---- tsconfig.json
在st.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也将作为输出，这是我们不希望看到的。
此时，reference将解决上述的每⼀个问题，我们修改项⽬结构如下：
|---- src/
|---- index.ts        // 整个⼯具库的⼊⼝
|---- copyDeep.ts    // 其中定义了copyDeep⽅法
|---- tsconfig.json // ⼯具库的编译配置⽂件
|---- test/
|---- st.ts    // copyDeep的单元测试
|---- tsconfig.json    // 测试的编译配置⽂件
|---- package.json
|---- tsconfig.json
并修改为以下配置：
// 根⽬录下的 /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的作⽤是将两个项⽬关联起来作为⼀个项⽬开发，当某个项⽬代码修改后还能单独编译相应的项⽬⽽不是整个项⽬。再说的简单点，就是实现了关联项⽬间的懒编译。
总结
本篇⽂章先到这⾥，总结⼀下：tsconfig.json这个⽂件是⽤来界定ts项⽬的根⽬录，也⽤来配置tsc在编译ts⽂件时的⼀些选项。files、exclude、include⽤来配置需要编译哪些⽂件；compilerOnSave是指定IDE保存后是否重新编译的；extends⽤来扩展当前的配置；扩展配置⽂件
中的字段会覆盖当前⽂件的相同字段；typeAcquisition⽤来指定某些库的类型声明⽂件，如：
"typeAcquisition": {
"jquery": "@/types/jquery"
}
json值的类型有哪些watchOptions⽤来配置tsc的监听策略；reference指定关联项⽬，从⽽提⾼编译速度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。