tsconfig常用配置解析

一、TypeScript编译工具安装

我们用TypeScript开发项目的时候，编写的源文件都是以”.ts”结尾的文件，而“.ts”文件是无法直接被浏览器或node环境下直接运行的，所以必须进行编译，将”.ts”的文件编译成”.js”文件后才能直接运行。要想编译TypeScript文件，那么必须使用tsc编译工具，需要注意的是，我们并不是直接去安装tsc，而是全局安装typescript，全局安装好typescript之后，就可以在命令行工具中直接使用tsc命令了，如下图所示:

二、tsc编译工具的使用

首先我们可以在命令行中，输入tsc --help，即可查看tsc命令的使用帮助文档。如果直接在项目根目录下输入tsc，那么tsc会将项目下的所有”.ts”文件都进行编译，编译后输出的文件与源ts文件同名、同位置。

我们可以在执行tsc命令的时候传递一些参数，进行特定的配置，如:

// 编译结果采用es5，模块形式采用commonjs，编译源文件为 ts/index.ts

tsc --target es5 --module commonjs ts/index.ts

对于简单的项目，我们可以通过给tsc命令传递一些参数进行编译，但是如果是大型的复杂项目，那么通过传递命令参数的形式进行编译就会显得心有余而力不足了，也不方便。我们可以采用配置文件的方式，来指导编译。即在项目根目录下，新建一个tsconfig.json的文件。注意，这是一个json文件，当然不一定要放在根目录下，可以通过tsc --project path/to/tsconfig.json指定配置文件。

三、使用配置文件编译ts文件

① files

由于默认情况下，tsc会编译当前项目下的所有ts文件，所以如果我们可以通过files配置来指定编译的入口文件，files的属性值为一个数组，可以指定要编译的具体文件，但是其不能使用通配符进行指定。

{
    //"files": [ // files中不能使用通配符进行配置
      //  "ts/**/*.ts"
    //]
    "files": [
        "ts/index.ts" // 对ts目录下的index.ts文件进行编译
    ]
}

如果files中配置了通配符，那么会报错error TS6053: File '/path/to/ts-test/ts/**/*.ts' not found.，并且files的属性值不能是空数组([])，否则也会编译报错;

② include

正是由于files配置无法使用通配符进行配置，所以添加了include配置，includes配置属性值也是一个数组，但是include中可以使用通配符，并且可以和files一起使用，最终编译的源文件包含，files和include的合集，如：

{
    "files": [
        "foo/foo.ts" // 包含foo目录下的foo.ts
    ],
    "include": [ // 可以使用通配符
        "ts/**/*.ts" // 包含ts目录下的所有ts文件
    ]
}

所以最终编译的源文件包含ts目录下的所有ts文件和foo目录下的foo.ts文件。

③ exclude

我们可以通过exclude配置来排除掉include配置中包含的源文件，需要特别注意的是，exclude只对include中包含文件起到排除的作用，其无法排除files中配置的源文件。exclude的适用场景，通常为，当所有的源文件被includes进来后，而其中有一些是ts的测试文件，可以直接排除掉，如:

{
    "include": [
        "ts/**/*.ts"
    ],
    "exclude": ["node_modules", "ts/test"] // 排除对ts目录下的test目录下的测试文件的编译
}

exclude只能排除include中包含的文件，并且不是可编译文件的依赖文件，也就是说，如果include配置为可编译ts目录下的所有ts文件，那么index.ts可以编译，虽然exclude了foo.ts文件，但是index.ts依赖了foo.ts，所以foo.ts还是会被编译。

④ compilerOptions

这是一个编译选项配置，用于控制编译过程和编译结果。常用的编译选项为:

4.1 noEmitOnError

这个是用于配置，当编译源文件出现错误的时候，是否继续输出编译结果。noEmitOnError默认为false，所以即使编译的源文件中有错误，那么也会继续输出编译结果，如果noEmitOnError配置为true，那么当源文件中有错误的时候，将不再输出编译结果。

{
    "compilerOptions":