简介
tsconfig.json
是 TypeScript 项目的配置文件,放在项目的根目录。反过来说,如果一个目录里面有tsconfig.json
,TypeScript 就认为这是项目的根目录。
如果项目源码是 JavaScript,但是想用 TypeScript 处理,那么配置文件的名字是jsconfig.json
,它跟tsconfig
的写法是一样的。
tsconfig.json
文件主要供tsc
编译器使用,它的命令行参数--project
或-p
可以指定tsconfig.json
的位置(目录或文件皆可)。
$ tsc -p ./dir
如果不指定配置文件的位置,tsc
就会在当前目录下搜索tsconfig.json
文件,如果不存在,就到上一级目录搜索,直到找到为止。
tsconfig.json
文件的格式,是一个 JSON 对象,最简单的情况可以只放置一个空对象{}
。下面是一个示例。
{
"compilerOptions": {
"outDir": "./built",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
本章后面会详细介绍tsconfig.json
的各个属性,这里简单说一下,上面示例的四个属性的含义。
- include:指定哪些文件需要编译。
- allowJs:指定源目录的 JavaScript 文件是否原样拷贝到编译后的目录。
- outDir:指定编译产物存放的目录。
- target:指定编译产物的 JS 版本。
tsconfig.json
文件可以不必手写,使用 tsc 命令的--init
参数自动生成。
$ tsc --init
上面命令生成的tsconfig.json
文件,里面会有一些默认配置。
你也可以使用别人预先写好的 tsconfig.json 文件,npm 的@tsconfig
名称空间下面有很多模块,都是写好的tsconfig.json
样本,比如 @tsconfig/recommended
和@tsconfig/node16
。
这些模块需要安装,以@tsconfig/deno
为例。
$ npm install --save-dev @tsconfig/deno
# 或者
$ yarn add --dev @tsconfig/deno
安装以后,就可以在tsconfig.json
里面引用这个模块,相当于继承它的设置,然后进行扩展。
{
"extends": "@tsconfig/deno/tsconfig.json"
}
@tsconfig
空间下包含的完整 tsconfig 文件目录,可以查看 GitHub。
tsconfig.json
的一级属性并不多,只有很少几个,但是compilerOptions
属性有很多二级属性。下面先逐一介绍一级属性,然后再介绍compilerOptions
的二级属性,按照首字母排序。
exclude
exclude
属性是一个数组,必须与include
属性一起使用,用来从编译列表中去除指定的文件。它也支持使用与include
属性相同的通配符。
{
"include": ["**/*"],
"exclude": ["**/*.spec.ts"]
}
extends
tsconfig.json
可以继承另一个tsconfig.json
文件的配置。如果一个项目有多个配置,可以把共同的配置写成tsconfig.base.json
,其他的配置文件继承该文件,这样便于维护和修改。
extends
属性用来指定所要继承的配置文件。它可以是本地文件。
{
"extends": "../tsconfig.base.json"
}
如果extends
属性指定的路径不是以./
或../
开头,那么编译器将在node_modules
目录下查找指定的配置文件。
extends
属性也可以继承已发布的 npm 模块里面的 tsconfig 文件。
{
"extends": "@tsconfig/node12/tsconfig.json"
}
extends
指定的tsconfig.json
会先加载,然后加载当前的tsconfig.json
。如果两者有重名的属性,后者会覆盖前者。
files
files
属性指定编译的文件列表,如果其中有一个文件不存在,就会报错。
它是一个数组,排在前面的文件先编译。
{
"files": ["a.ts", "b.ts"]
}
该属性必须逐一列出文件,不支持文件匹配。如果文件较多,建议使用include
和exclude
属性。
include
include
属性指定所要编译的文件列表,既支持逐一列出文件,也支持通配符。文件位置相对于当前配置文件而定。
{
"include": ["src/**/*", "tests/**/*"]
}
include
属性支持三种通配符。
-
?
:指代单个字符 -
*
:指代任意字符,不含路径分隔符 -
**
:指定任意目录层级。
如果不指定文件后缀名,默认包括.ts
、.tsx
和.d.ts
文件。如果打开了allowJs
,那么还包括.js
和.jsx
。
references
references
属性是一个数组,数组成员为对象,适合一个大项目由许多小项目构成的情况,用来设置需要引用的底层项目。
{
"references": [
{ "path": "../pkg1" },
{ "path": "../pkg2/tsconfig.json" }
]
}
references
数组成员对象的path
属性,既可以是含有文件tsconfig.json
的目录,也可以直接是该文件。
与此同时,引用的底层项目的tsconfig.json
必须启用composite
属性。
{
"compilerOptions": {
"composite": true
}
}
compileOptions
compilerOptions
属性用来定制编译行为。这个属性可以省略,这时编译器将使用默认设置。
allowJs
allowJs
允许 TypeScript 项目加载 JS 脚本。编译时,也会将 JS 文件,一起拷贝到输出目录。
{
"compilerOptions": {
"allowJs": true
}
}
alwaysStrict
alwaysStrict
确保脚本以 ECMAScript 严格模式进行解析,因此脚本头部不用写"use strict"
。它的值是一个布尔值,默认为true
。
allowSyntheticDefaultImports
allowSyntheticDefaultImports
允许import
命令默认加载没有default
输出的模块。
比如,打开这个设置,就可以写import React from "react";
,而不是import * as React from "react";
。
allowUnreachableCode
allowUnreachableCode
设置是否允许存在不可能执行到的代码。它的值有三种可能。
-
undefined
: 默认值,编辑器显示警告。 -
true
:忽略不可能执行到的代码。 -
false
:编译器报错。
allowUnusedLabels
allowUnusedLabels
设置是否允许存在没有用到的代码标签(label)。它的值有三种可能。
-
undefined
: 默认值,编辑器显示警告。 -
true
:忽略没有用到的代码标签。 -
false
:编译器报错。
baseUrl
baseUrl
的值为字符串,指定 TypeScript 项目的基准目录。
由于默认是以 tsconfig.json 的位置作为基准目录,所以一般情况不需要使用该属性。
{
"compilerOptions": {
"baseUrl": "./"
}
}
上面示例中,baseUrl
为当前目录./
。那么,当遇到下面的语句,TypeScript 将以./
为起点,寻找hello/world.ts
。
import { helloWorld } from "hello/world";
checkJs
checkJS
设置对 JS 文件同样进行类型检查。打开这个属性,也会自动打开allowJs
。它等同于在 JS 脚本的头部添加// @ts-check
命令。
{
"compilerOptions":{
"checkJs": true
}
}
composite
composite
打开某些设置,使得 TypeScript 项目可以进行增量构建,往往跟incremental
属性配合使用。
declaration
declaration
设置编译时是否为每个脚本生成类型声明文件.d.ts
。
{
"compilerOptions": {
"declaration": true
}
}
declarationDir
declarationDir
设置生成的.d.ts
文件所在的目录。
{
"compilerOptions": {
"declaration": true,
"declarationDir": "./types"
}
}
declarationMap
declarationMap
设置生成.d.ts
类型声明文件的同时,还会生成对应的 Source Map 文件。