前言

最近多个项目中都引入了TS，但是由于配置不统一，导致开发体验也不一致。所以，打算研究学习下TS的配置文件tsconfig.json。

tsconfig.json作为TS的配置文件，主要有两方面的作用：

指定编译文件
定义编译配置

下面会从这两方面进行学习。

指定编译文件

tsconfig.json中常用属性包含：files、include、exclude和compilerOptions（compilerOptions用于记录编译配置，我们下面会进行介绍）。

files

files的值为包含相对或绝对文件路径的数组，表示需要编译的文件。

{
  "files": [
    "scr/test.ts"
  ]
}

include&exclude

include也用于指定需要编译的文件，exclude用于过滤需要编译的文件，两者都是指定一个文件glob匹配模式的数组。

支持的glob通配符有：

*匹配0或多个字符（不包括目录分隔符）

?匹配一个任意字符（不包括目录分隔符）

**/递归匹配任意子目录

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

细节规则

如果files和include都没有被指定，编译器默认包含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts和.tsx）
如果指定了files和include，编译器会将它们结合一并包含进来
exclude默认情况下会排除node_modules，bower_components，jspm_packages和compilerOptions.outDir（输出文件路径）目录
使用include引入的文件可以使用exclude属性过滤。然而，通过files属性明确指定的文件却总是会被包含在内，不管exclude如何设置
使用compilerOptions.outDir指定的目录下的文件永远会被编译器排除，除非你明确地使用files将其包含进来
任何被files或include指定的文件所引用的文件也会被包含进来。files或include指定文件A.ts引用了B.ts，因此B.ts也会进行编译
编译器不会去引入那些可能做为输出的文件；比如，假设我们包含了index.ts，那么index.d.ts和index.js会被排除在外。通常来讲，不推荐只有扩展名的不同来区分同目录下的文件。

定义编译配置

在tsconfig.json中，我们使用compilerOptions设置编译的配置选项。

compilerOptions的配置信息很多，下面我介绍一些常用配置，更多配置可以查看官方完整的编译选项列表。

选项	类型	默认值	说明
target	string	ES3	生成`.js`文件的版本。值包含`ES3` (default), `ES5`, `ES6`/`ES2015` (synonymous), `ES7`/`ES2016`, `ES2017`, `ES2018`, `ES2019`, `ES2020`, `ESNext`（最新的生成目标列表为ES proposed features）
module	string	if target === `ES3` or `ES5` ? `CommonJS` : `ES6`/`ES2015`	指定生成哪个模块系统代码。值包含`CommonJS`, `ES6`/`ES2015`, `ES2020`, `None`, `UMD`, `AMD`, `System`, `ESNext`
lib	string[]		编译过程中需要引入的ES功能库文件的列表。具体值可以参考这里。
incremental	boolean	if composite ? true : false	保存`.tsbuildinfo`文件，以允许项目的增量编译
composite	boolean	true	启用允许TypeScript项目与项目引用一起使用的约束。具体说明可以参考这里。
tsBuildInfoFile	string		指定.tsbuildinfo增量编译文件的文件夹路径
outDir	string		指定输出目录。如未指定，输出文件会和编译文件在同一目录
outFile	string		将所有全局（非模块）文件合并到指定的单个输出文件中。仅当`module`为`None`, `System`, `AMD`时有效
rootDir	string		所有非声明输入文件的最长公共路径，用于在输出目录中保留与输入目录中相同的目录结构。可以参考这里的demo
declaration	boolean	false	生成声明文件`.d.ts`
declarationDir	string		生成声明文件的路径
emitDeclarationOnly	boolean	false	仅输出`.d.ts`文件，而不输出`.js`文件
sourceMap	boolean	false	为生成的`.js`文件创建源映射文件
inlineSourceMap	boolean	false	为源映射文件包含在`.js`文件中
declarationMap	boolean	false	为生成的`.d.js`文件创建源映射文件

其他顶层属性

compileOnSave

compileOnSave，可以让IDE在保存文件的时候根据tsconfig.json重新生成文件。

{
    "compileOnSave": true
}

要想支持这个特性需要Visual Studio 2015， TypeScript1.8.4以上并且安装atom-typescript插件。

extends

tsconfig.json文件可以利用extends属性从另一个配置文件里继承配置。

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

// tsconfig.json
{
  "extends": "./base.tsconfig",
}

首先从基本文件中加载配置，然后由继承的配置文件中的配置覆盖。在配置文件中找到的所有相对路径都将相对于其起源的配置文件进行解析。

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

当前，唯一从继承中排除的顶级属性是references。

references

references用于指定项目引用。

通过分成多个项目，可以大大提高类型检查和编译的速度，减少使用编辑器时的内存使用，并改善对程序逻辑分组的执行。

typeAcquisition

在项目中，TS能将node_modules的库定义文件(.d.ts)引入。typeAcquisition属性用于具体设置：

enable: 布尔类型，是否开启自动引入库类型定义文件(.d.ts)，默认为false；
include : 数组类型，允许自动引入的库名，如：["lodash"]；
exculde : 数组类型，排除的库名，如：["jquery"]；

TS学习（一）--tsconfig.json配置

前言