知食记
搜索文档…
TypeScript tsconfig.json 整理

引入配置

文件相关的配置确保 TypeScript 能包含正确的文件

include

设置一个包含文件名的数组或匹配规则,指明那些文件是引入到程序中的。文件名基于包含tsconfig.json文件的路径解析
1
// settings
2
{
3
"include": ["src/**/*", "tests/**/*"]
4
}
5
6
// results
7
.
8
├── scripts ⨯
9
│ ├── lint.ts ⨯
10
│ ├── update_deps.ts ⨯
11
│ └── utils.ts ⨯
12
├── src ✓
13
│ ├── client ✓
14
│ │ ├── index.ts ✓
15
│ │ └── utils.ts ✓
16
│ ├── server ✓
17
│ │ └── index.ts ✓
18
├── tests ✓
19
│ ├── app.test.ts ✓
20
│ ├── utils.ts ✓
21
│ └── tests.d.ts ✓
22
├── package.json
23
├── tsconfig.json
24
└── yarn.lock
Copied!
默认值
如果定义了files配置,则为 [ ] ;否则为 [" ** / * "]

exclude

设置一个包含文件名的数组或匹配规则,指明忽略哪些include中的配置
exclude 仅对 include 配置中的文件生效。一个被 exclude 设置的文件依然可以被代码引入依赖,因此,这并不是一个避免文件被使用的设置,这仅仅是用来改变 include 的设置
默认值
["node_modules", "bower_components", "jspm_packages"] 和 outdir

files

设置一个包含文件名的数组,指明包含到程序中的文件。这通常应用于你仅需少量文件时,否则使用include是更好的建议
1
{
2
"compilerOptions": {},
3
"files": [
4
"core.ts",
5
"sys.ts",
6
"types.ts",
7
"scanner.ts",
8
"parser.ts",
9
"utilities.ts",
10
"binder.ts",
11
"checker.ts",
12
"tsc.ts"
13
]
14
}
Copied!
默认
false

extends

继承通用的设置。如果有重名的设置,则新定义的设置会覆盖被继承的配置。extends 配置对于大型项目的 tcsonfig.json 的复用帮助很大
1
{
2
"compilerOptions": {
3
"noImplicitAny": true,
4
"strictNullChecks": true
5
}
6
}
Copied!
1
{
2
"extends": "./configs/base",
3
"files": ["main.ts", "supplemental.ts"]
4
}
Copied!

项目配置

项目配置决定了你希望项目是如何运行的

allowJS

是否允许引入 JavaScript 文件。默认仅允许引入 .ts.tsx 文件
默认
false

checkJS

是否报告 JavaScript 文件中的错误。此选项依赖 allowJStrue
例如,根据 TypeScript 自带的 parseFloat 类型定义,这是不正确的 JavaScript:
1
// parseFloat 仅接受一个字符串作为参数
2
module.exports.pi = parseFloat(3.124);
Copied!
当引入到一个 TypeScript 模块:
1
// @filename: constants.js
2
module.exports.pi = parseFloat(3.124);
3
4
// @filename: index.ts
5
import { pi } from "./constants";
6
console.log(pi);Try
Copied!
你将不会得到任何错误。但是如果你开启了 checkJs 选项,那么你可以从 JavaScript 文件中得到错误信息。
默认
false

declaration

是否要在编译时输出.d.ts文件。.d.ts 文件用于向外部模块描述API的类型定义文件。
declaration 设置为 true 时,用编译器执行下面的 TypeScript 代码:
1
export let helloWorld = "hi";Try
Copied!
将会生成如下这样的 index.js 文件:
1
export let helloWorld = "hi";Try
Copied!
以及一个相应的 helloWorld.d.ts
1
export declare let helloWorld: string;
Copied!
默认值
false

lib

TypeScript 包括一组默认的内建 JS 接口(例如 Math)的类型定义,以及在浏览器环境中存在的对象的类型定义(例如 document)
TypeScript 还包括与你指定的 target 选项相匹配的较新的 JS 特性的 API。例如如果target 为 ES6 或更新的环境,那么 Map 的类型定义是可用的。
最小化的依赖引入能避免下游包被污染的可能性。我们需要谨慎的选择lib需要包含的库。
高阶库

jsx

控制 JSX 在 JavaScript 文件中的输出方式。 这只影响 .tsx 文件的 JS 文件输出。
  • react: 将 JSX 改为等价的对 React.createElement 的调用并生成 .js 文件。
  • react-jsx: 改为 __jsx 调用并生成 .js 文件。
  • react-jsxdev: 改为 __jsx 调用并生成 .js 文件。
  • preserve: 不对 JSX 进行改变并生成 .jsx 文件。
  • react-native: 不对 JSX 进行改变并生成 .js 文件。
示例代码:
1
export const helloWorld = () => <h1>Hello world</h1>;
Copied!
默认为: "react"
1
export const helloWorld = () => React.createElement("h1", null, "Hello world");Try
2
Copied!
保留: "preserve"
1
export const helloWorld = () => <h1>Hello world</h1>;Try
2
Copied!
React Native: "react-native"
1
export const helloWorld = () => <h1>Hello world</h1>;Try
2
Copied!
React 17 转换: "react-jsx"[1]
1
import { jsx as _jsx } from "react/jsx-runtime";
2
export const helloWorld = () => _jsx("h1", { children: "Hello world" }, void 0);Try
3
Copied!
React 17 开发模式转换: "react-jsxdev"[1]
1
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
2
const _jsxFileName = "/home/runner/work/TypeScript-Website/TypeScript-Website/packages/typescriptlang-org/index.tsx";
3
export const helloWorld = () => _jsxDEV("h1", { children: "Hello world" },
4
Copied!

module

这设置了tsc编译打包的模块系统。改变module同时会影响moduleResolution
示例
1
// @filename: index.ts
2
import { valueOfPi } from "./constants";
3
4
export const twoPi = valueOfPi * 2;
Copied!

CommonJS

1
"use strict";
2
Object.defineProperty(exports, "__esModule", { value: true });
3
exports.twoPi = void 0;
4
const constants_1 = require("./constants");
5
exports.twoPi = constants_1.valueOfPi * 2;
Copied!

UMD

1
(function (factory) {
2
if (typeof module === "object" && typeof module.exports === "object") {
3
var v = factory(require, exports);
4
if (v !== undefined) module.exports = v;
5
}
6
else if (typeof define === "function" && define.amd) {
7
define(["require", "exports", "./constants"], factory);
8
}
9
})(function (require, exports) {
10
"use strict";
11
Object.defineProperty(exports, "__esModule", { value: true });
12
exports.twoPi = void 0;
13
const constants_1 = require("./constants");
14
exports.twoPi = constants_1.valueOfPi * 2;
15
});
Copied!

AMD

1
define(["require", "exports", "./constants"], function (require, exports, constants_1) {
2
"use strict";
3
Object.defineProperty(exports, "__esModule", { value: true });
4
exports.twoPi = void 0;
5
exports.twoPi = constants_1.valueOfPi * 2;
6
});
Copied!

System

1
System.register(["./constants"], function (exports_1, context_1) {
2
"use strict";
3
var constants_1, twoPi;
4
var __moduleName = context_1 && context_1.id;
5
return {
6
setters: [
7
function (constants_1_1) {
8
constants_1 = constants_1_1;
9
}
10
],
11
execute: function () {
12
exports_1("twoPi", twoPi = constants_1.valueOfPi * 2);
13
}
14
};
15
});
Copied!

ESNext

1
import { valueOfPi } from "./constants";
2
export const twoPi = valueOfPi * 2;Try
Copied!

ES2020

1
import { valueOfPi } from "./constants";
2
export const twoPi = valueOfPi * 2;Try
Copied!

None

1
"use strict";
2
Object.defineProperty(exports, "__esModule", { value: true });
3
exports.twoPi = void 0;
4
const constants_1 = require("./constants");
5
exports.twoPi = constants_1.valueOfPi * 2;
Copied!
默认值
如果target 为 ES3 或者 ES5,默认值为 CommonJS
如果target 为 ES6 或者更高,则默认值为 ES6/ES2015

moduleResolution

指定模块解析策略:'node' (Node.js) 或 'classic' (在 TypeScript 1.6 版本之前使用)。 你可能不需要在新代码中使用 classic。
默认值
如果moduleAMD/UMD/System/ES6, 则为 Classic
其他情况下为 Node

noEmit

是否禁止编译生成文件。如果你想使用babel来编译TypeScript,可以设置这个选项为true
默认值
false

outDir

指定编译输出的目录。若没有指定,.js 将被生成至于生成它们的 .ts 文件相同的目录中:
1
$ tsc
2
3
example
4
├── index.js
5
└── index.ts
Copied!
使用类似这样的 tsconfig.json
1
{
2
"compilerOptions": {
3
"outDir": "dist"
4
}
5
}
Copied!
使用这些配置运行 tsc 时,会将文件移动到指定的 dist 文件夹中:
1
$ tsc
2
3
example
4
├── dist
5
│ └── index.js
6
├── index.ts
7
└── tsconfig.json
Copied!
默认值
n/a

outFile

设置打包输出至单个文件中。
除非moduleNone, SystemAMD,否则不能使用 outFile
默认值
n/a

plugins

设置编辑器内运行的语言服务插件列表
语言服务插件是一种基于现有 TypeScript 文件向用户提供额外信息的方法。它们可以改进 TypeScript 和编辑器之间的现有信息,或提供自己的错误信息。

removeComments

设置当打包 JavaScript 时,忽略所有 TypeScript 文件中的注释。
例如,这是一个有 JSDoc 注释的 TypeScript 文件:
1
/** 'Hello world' 的葡萄牙语翻译 */
2
export const helloWorldPTBR = "Olá Mundo";
Copied!
当然 removeComments 被设置为 true
1
export const helloWorldPTBR = "Olá Mundo";Try
Copied!
未设置 removeComments 或被设置为 false
1
/** 'Hello world' 的葡萄牙语翻译 */
2
export const helloWorldPTBR = "Olá Mundo";Try
Copied!
这意味着你的注释将呈现在 JavaScript 中。
默认值
false

rootDir

设定 TypeScript 打包输出的根文件目录。
这么说有点抽象。举例来说,假设你有一些输入文件:
1
MyProj
2
├── tsconfig.json
3
├── core
4
│ ├── a.ts
5
│ ├── b.ts
6
│ ├── sub
7
│ │ ├── c.ts
8
├── types.d.ts
Copied!
rootDir 推断的结构是所有非声明输入文件的最长公共路径,在例子中为 core/
如果你的 outDirdist,TypeScript 将会生成这样的文件树:
1
MyProj
2
├── dist
3
│ ├── a.ts
4
│ ├── b.ts
5
│ ├── sub
6
│ │ ├── c.ts
Copied!
但你可能希望让 core 成为输出目录结构的一部分。 通过在 tsconfig.json 中指定 rootDir: ".",TypeScript 将会生成这样的文件树:
1
MyProj
2
├── dist
3
│ ├── core
4
│ │ ├── a.js
5
│ │ ├── b.js
6
│ │ ├── sub
7
│ │ │ ├── c.js
Copied!
注意
rootDir 不会影响哪些文件被包含在编译中。如果设置了rootDir,但是程序又依赖了rootDir 之外的文件,这个文件会被输出至outDir外。因此,rootDir务必要保证依赖的文件都在rootDir

sourceMap

是否生成sourcemap
默认值
false

严格检查