tsconfig.json

【强烈推荐】Understanding TypeScript’s “Compilation Process” & the anatomy of “tsconfig.json” file to configure TypeScript Compileropen in new window，文章里有对tsconfig.json里每一个选项的详细阐述。

TypeScript 编译器通过项目的配置文件（默认是tsconfig.json）来查找用于参与编译的文件以及确定如何输出编译后的文件。

执行tsc命令时，可通过--project或-p标志来指定配置文件的路径以代替默认的路径tsconfig.json。

tsc -p ./tsconfig.prod.json

tsconfig.json所在的目录称为项目的根目录。

根级选项

根级选项主要是关于静态类型分析以及确定哪些文件会包含在编译过程里的配置，这些选项都是与compilerOptions选项平级的。

files和include选项里的文件都包含在编译过程里，而exclude选项里的文件将不会包含在编译过程里。
源码里通过import语句导入的模块，会自动包含在编译过程里，而不会受到files、include、exclude选项的影响。

types

// tsconfig.json
{
    "compilerOptions": {
        "types": [ "node", "moment" ]
    }
}

1
2
3
4
5
6

TypeScript 将从<type-root>目录里自动引入types选项里的声明文件，比如<type-root>/moment。
针对通过import语句手动引入的包，即使该包并没有包含在types选项里，TypeScript 也会引入该包的类型声明文件。

编译选项

编译选项里的各个配置选项，用于设置 TypeScript 编译器如何处理输入文件，比如：

输出文件放置在哪儿
如何查找模块
是否需要输出类型声明文件、SourceMap 等
等等

outFile

若是输出的模块系统不是None、System、AMD，而是ES6、CommonJS等，TypeScript 编译器将不会产生一个打包文件。

文件的引入位置问题，导致CommonJS和ES6模块不能打包成一个文件。若是编译后的x.js里存在一行导入语句require('./src/y')，这表明代码运行时将会从相对于x.js的dir目录导入y.js文件。但若是这些文件都打包到单个文件里，由于x.js和y.js现在处于同一个目录下的同一个文件里，将无法完成从dir目录导入y.js文件。像 Webpack 这样的打包器会在最终的打包文件里添加额外的模块加载代码来完成这个功能，但是 TypeScript 没有这么做。

wind-stone 注释: 从技术上来说，TypeScript 也能实现与 Webpack 类似的打包功能，但是 TypeScript 的定位不是打包器，因此并没有实现这些功能。

paths

paths作模块映射时，需要注意最终编译后文件里引入的模块名称是映射前的名称。

项目目录结构:

project
├── a.ts
└── src/
   └── b.ts

1
2
3
4

// tsconfig.json
{
    "compilerOptions": {
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {
            "box": [ "src/b" ]
        }
    }
}

1
2
3
4
5
6
7
8
9
10

// a.ts
import { b } from 'box';
console.log( b );

1
2
3

// src/b.ts
export const b = 'B';

1
2

// dist/a.js`
var box_1 = require("box");
console.log(box_1.b);

1
2
3

打包后的dist/a.js文件里，require的仍然是box，而不是src/b。解决方案可参见Understanding TypeScript’s “Compilation Process” & the anatomy of “tsconfig.json” file to configure TypeScript Compileropen in new window的paths章节。

allowJs

allowJs编译选项告知 TypeScript 编译器将.js文件包含在编译过程里，这将应用到files和include选项以及import语句里的.js文件。

import xyz from './xyz';

当在import语句里引入xyz模块时，TypeScript 编译器会查找./xyz.ts、./xyz.d.ts以及./xyz.js文件。

checkJs

设置allowJs为true，.js文件可以包含在编译过程里，但是 TypeScript 编译器并不会在编译过程里对.js文件里的代码做类型检查。

设置checkJs为true，TypeScript 编译器将对.js文件做类型检查。

baseUrl

import world from 'src/world'

当设置baseUrl时，若import语音引入了一个非相对路径的模块比如src/world，TypeScript 编译器会首先在baseUrl目录里寻找src/world模块，如果找不到，才会去typeRoots设置的目录里（比如node_modules）查找。

extends

从其他tsconfig.json文件继承配置。

# tsconfig.json

# 根级选项

# types

# 编译选项

# outFile

# paths

# allowJs

# checkJs

# baseUrl

# extends