TypeScript实例讲解（二十四）

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

本篇内容：TypeScript 配置文件。

在 TypeScript 实例讲解（一）中讲解过 TypeScript 环境搭建以及使用 tsc 命令。

TypeScript 配置文件

现在初始化 TypeScript 项目，在根目录下运行命令：tsc --init。

运行成功后会在根目录下创建一个 json 文件：tsconfig.json。如果没有成功则需要重新安装一下 TypeScript。

// tsconfig.json
{
     "compilerOptions": {
         "target": "es5",
         "module": "commonjs",
         "strict": true,
         "esModuleInterop": true,
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true
     }
}

tsconfig.json 文件就是 TypeScript 编译配置文件。

// 例 1
// demo.ts

// 定义变量
const student: string = 'bear';

例1写了两行简单的 TypeScrip 代码。运行命令：tsc demo.ts，编译成功后生成了一份新文件 demo.js ：

// demo.js

"use strict";
// 定义变量
var student = 'bear';

编译成功是因为刚刚的 tsconfig.json 配置文件在这次编译中生效了吗？其实并没有生效，我们打开配置文件中去除注释的选项（因为这个容易看出结果）。

// 例 2
"removeComments": true   // 编译时去除注释

重新运行命令：tsc demo.ts 编译：

// demo.js

"use strict";
// 定义变量
var student = 'bear';

我们发现注释仍然存在，因为 tsc 命令后面指定了具体的文件，则不会用到 tsconfig.json 文件里面的配置；只有我们在命令行直接运行 tsc 命令（后面不带任何参数）的时候才会使用 tsconfig.json 文件里面的配置。

再次运行命令：tsc

// demo.js

"use strict";
var student = 'bear';

现在注释已经被去除了。

问题：运行 tsc 命令，后面不带任何参数时到底会编译哪些文件呢？
运行 tsc 命令默认会编译根目录下的所有 ts 文件，除非在 tsconfig.json 文件通过配置来指定要编译的文件。

// 例 3
// tsconfig.json

{
    "include": ["./demo.ts"]
     "compilerOptions": { ... }
}

include属性：表示需要编译的文件
exclude属性：表示不需要编译的文件
files属性：也表示需要编译的文件

// 例 4
// tsconfig.json

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

"include" 和 "exclude" 属性支持以下通配符：
* 匹配0或多个字符（不包括目录分隔符）
? 匹配一个任意字符（不包括目录分隔符）
**/ 递归匹配任意子目录

编译选项

"removeComments": Boolean 是否去除注释
"rootDir": "./" 表示指定编译目录
"outDir": "./" 表示重定向输出目录
"allowJs": Boolean 表示是否对 javascript 文件进行编译
"incremental": Boolean 表示编译过的内容不会再次编译
"checkJs": Boolean 表示是否检查JS语法，需要与 allowJs 选项配合使用
......

编译选项（compilerOptions）共超过 70 项，其中有些选项是试验性的，还有一些选项只能在 tsconfig.json 里使用，不能在命令行使用。不需要硬背，大概知道有些什么即可，需要用时再查阅官方文档。

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。