TS04 tsconfig.json

发表于 分类于 阅读次数：

tsconfig.json配置简介。

概述

在进行少量编译时，可以直接在命令行使用tsc命令：

1
tsc --outFile file.js --target es3 --module commonjs file.ts

在根目录下新建tsconfig.json文件，用来指定编译这个项目的选项，在命令行使用tsc命令时，如果没有任何输入文件情况下调用，那么编译器会从当前目录开始查找tsconfig.json文件，并逐级向上搜索，直至根目录。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "files": [
    "app.ts",
    "foo.ts",
  ]
}

compilerOptions用来配置编译选项，files用来指定带编译的入口文件，任何被入口文件依赖的文件，都会被编译器自动纳入为编译对象。

也可以使用include和exclude来指定和排除带编译文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

指定编译目录

可以使用files属性，它接受一个数组，数组元素可以是相对路径或者绝对路径

也可以使用include和exclude属性，它们都接受一个数组，支持通配符*（匹配任意字符）、?（匹配任意单个字符）、**/（递归匹配任何子路径）

对于编译器来说，TS文件默认指的是.ts、.tsx和.d.ts后缀的文件，如果开启了allowJs选项，那么.js和.jsx文件也会被认为是TS文件。

如果files和include都未设置，那么除了exclude排除的文件，编译器会默认包含路径下所有TS文件。

如果同时设置files和include，那么二者指定的文件都会被编译

exclude的默认值是node_modules、bower_components、jspm_packages和编译选项outDir指定的路径。

exclude对include有效，但是对于files无效，如果文件在files中引入，那么exclude不生效。

编译选项

完整的选项列表。

字段 类型 默认值 说明
allowJs boolean false 允许编译JS文件
checkJs boolean false 报告JS文件中存在的类型错误（需打开allowJS）
declaration boolean false 生成对应的.d.ts声明文件
declarationDir string - 生成的.d.ts文件路径（默认与.ts相同）
experimentalDecorators boolean false 启用装饰器功能
jsx string Preserve 在.tsx中支持JSX，详细说明
lib string[] - 编译对应的ES版本（es5/es6/es7/dom等），根据target不同取值不同
module string commonjs/es6 生成模块格式，与target有关
moduleResolution string classic/node 模块解析方式，与module有关，详细说明
noImplicitAny boolean false 存在隐式any时报错
noImplicitReturns boolean false 函数无return时报错
noImplicitThis boolean false this可能为any时报错
outDir string - 编译输出目录，默认与.ts相同
sourceMap boolean false 生成.map文件
target string es3 编译的JS文件版本

类型相关

typeRoots和types，指定默认的类型声明文件的查找路径，默认为node_modules/@types，只对NPM安装的模块有效

1
2
3
4
5
6
{
  "compilerOptions": {
    "typeRoots": ["./typings"], // 引入`./typings`下所有TS类型声明模块
    "types": ["node", "lodash"], // 只引入两个声明模块，其他的不会被引入
  }
}

自动引入只对包含全局声明的模块有效，比如jQuery，不用再手动import就可以在任何文件使用$的类型，对于import 'foo'，编译器会在node_modules和node_modules/@types文件下查找foo模块和声明模块

所以，如果想让自定义声明的类型不需要手动引入就可以在任何地方引入，可以将其声明为global：

1
2
3
4
5
6
7
8
9
declare global {
  const graphql: (query: TemplateStringsArray) => void;
  namespace Gatsby {
    interface ComponentProps {
      children: () => React.ReactNode,
      data: RootQueryType
    }
  }
}

这样就可以在任何地方直接使用graphql和Gatsby对应的类型了

配置复用

可以使用extends来实现配置复用，即一个配置文件可以继承另外一个文件的配置属性：

1
2
3
4
5
6
7
{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

要注意，子配置的同名配置会覆盖父配置文件的配置，同时相对路径都会根据子配置文件所在路径进行解析

参考