关于typescript:typeScript-配置文件该怎么写

TypeScript 的学习材料十分多，其中也不乏很多优良的文章和教程。然而目前为止没有一个我特地称心的。起因有：

它们大多数没有一个清晰的主线，而是依照 API 组织章节的，内容在 逻辑上 比拟零散。
大多是“讲是什么，怎么用“，而不是”讲为什么，讲原理“。
大多数内容比拟干燥，趣味性比拟低。都是水灵灵的文字，没有图片，不足可能引起强烈共鸣的例子。

因而我的想法是做一套不同市面上大多数的 TypeScript 学习教程。以人类认知的角度思考问题，学习 TypeScript，通过通俗易懂的例子和图片来帮忙大家建设 TypeScript 世界观。

系列安顿：

上帝视角看 TypeScript（已公布）
TypeScript 类型零碎（已公布）
types 和 @types 是什么？（已公布）
你不晓得的 TypeScript 泛型（万字长文，倡议珍藏）（已公布）
TypeScript 配置文件该怎么写？（就是本文）
TypeScript 是如何与 React，Vue，Webpack 集成的？
TypeScript 练习题

目录未来可能会有所调整。

留神，我的系列文章根本不会讲 API，因而须要你有肯定的 TypeScript 应用根底，举荐两个学习材料。

深刻了解 TypeScript
官网文档

联合这两个材料和我的系列教程，把握 TypeScript 不可企及。

接下来，咱们通过几个方面来从宏观的角度来看一下 TypeScript。

<!– more –>

这篇文章是我的 TypeScript 系列的 第 5 篇。明天咱们就来看下，TypeScript 的配置文件 tsconfig.json 该如何写。

和 package.json 一样，它也是一个 JSON 文件。package.json 是包形容文件，对应的 Commonjs 标准，而 tsconfig.json 是最终被 TypeScript Compiler 解析和应用的一个 JSON 文件。TypeScript Compiler 用这个配置文件来决定如何对我的项目进行编译。

说到编译，不得不提一个出名选手 – babel。和 TypeScript 相似，他们都能够将一种语法动态编译成另外一种语法。如果说我想编译一个文件，我只须要通知 babel 我的文件门路即可。

npx babel script.js

有时候我想编译整个文件夹：

npx babel src --out-dir lib

babel 也能够指定输入目录，指定须要疏忽的文件或目录等等，TypeScript 也是一样！你当然能够像 babel 一样在命令行中全副指定好，也能够将这些配置放到 tsconfig.json 中，以配置文件的模式传递给 TypeScript Compiler。这就是 tsconfig.json 文件的初衷，即承受用户输出作为配置项。

咱们先来看一个简略的 tsconfig 文件。

{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

如上配置做了：

读取所有可辨认的 src 目录下的文件（通过 include）。
承受 JavaScript 做为输出（通过 allowJs）。
生成的所有文件放在 built 目录下（通过 outDir）。
将 JavaScript 代码降级到低版本比方 ECMAScript 5（通过 target）。

理论我的项目有比这个更简单。接下来，咱们来进一步解读。不过在讲配置项之前，咱们先来看下 tsconfig.json 是如何被解析的。

如果一个目录下存在一个 tsconfig.json 文件，那么意味着这个目录是 TypeScript 我的项目的根目录。 如果你应用 tsc 编译你的我的项目，并且没有显式地指定配置文件的门路，那么 tsc 则会逐级向上搜寻父目录寻找 tsconfig.json，这个过程相似 node 的模块查找机制。

如图：

在 _uglify-js@3.7.2@uglify-js 下执行 tsc 则会找到配置文件 1，在 _uglify-js@3.7.2@uglify-js/bin 下执行 tsc 也会找到配置文件 1
同理在 lib，node_modules 也会找到配置文件 1
在 _uglify-js@3.7.2@uglify-js/bin/lucifer 下执行 tsc 则会找到配置文件 2
在 _uglify-js@3.7.2@uglify-js/lib/lucifer 下执行 tsc 则会找到配置文件 3

我在上帝视角看 TypeScript 一种讲述了 TypeScript 到底做了什么，带你从宏观的角度看了一下 TypeScript。其中提到了 TypeScript 编译器会承受文件或者文件汇合作为输出，最终转换为 JavaScript（noEmit 为 false）和 .d.ts(declarations 为 true)。

这里其实还少了一个点，那就是除了承受文件或者文件汇合作为输出，还会承受 tsconfig.json。tsconfig.json 的内容决定了编译的范畴和行为，不同的配置可能会失去不同的输入，或者失去不同的查看后果。

当 tsc 找到了一个 tsconfig.json 文件，那么其规定的编译目录则全副会被 typescript 解决，当然也包含其依赖的文件。如果 tsc 没有找到一个 tsconfig.json 或 tsconfig 没有无效信息，那么 tsc 会应用默认配置。比方 tsconfig 是一个空的就没有无效信息：

{}

tsconfig 的全副属性，以及属性的默认值能够在这里找到：http://json.schemastore.org/t…

总结一下 tsc 解析 tsconfig.json 的逻辑。

如果命令行指定了配置选项或者指定了配置文件的门路，那么间接会读取。
- 依据 tsconfig json schema 校验是否格局正确。
  - 如果正确，则将其和默认配置合并（如果有 extends 字段，也会一起合并），将合并后的配置传递给 TypeScript 编译器并开始编译。
  - 否则抛出谬误
否则，会从当前目录查找 tsconfig.json 文件，如果找不到则逐层向上搜寻父目录。
- 如果找到了则会去依据 tsconfig json schema 校验是否格局正确。
  - 如果正确，则将其和默认配置合并（如果有 extends 字段，也会一起合并），将合并后的配置传递给 TypeScript 编译器并开始编译。
  - 否则抛出谬误
- 否则，始终找不到则间接应用默认配置

tsconfig 的顶层属性（Top Level）不多，次要有：compilerOptions, files, include, exclude,extends,compileOnSave等。

compilerOptions 是重头戏，其属性也是最多的，咱们的我的项目也是对这个定制比拟多，这个我前面会重点讲。
files 则是你须要编译的文件
exclude 则是你不须要编译的文件目录（反对 glob）
include 是你须要编译的文件目录（反对 glob）
extends 就是继承另外一个配置文件，TypeScript 会对其进行合并，多我的项目公共配置有用。你也能够间接继承社区的“最佳实际”，比方:

{
  "extends": "@tsconfig/node12/tsconfig.json",

  "compilerOptions": {},

  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

compileOnSave 则是和编辑器（确切地说是文件系统）联动的配置，即是否在文件保留后进行编译，理论我的项目不倡议应用。

除了 compilerOptions，其余也绝对比拟好了解。因而接下来我只针对 compilerOptions 具体解说一番。

具体全面的内容，大家只须要参考官网的就好了。官网写的不仅全面，而且做了分类，十分清晰。

接下来，我会依据性能离开讲几个罕用的配置。

罕用的是以下四个，因为后面曾经做了介绍，因而就不赘述了。

exclude
extends
files
include

alwaysStrict

默认：false

首次公布版本：2.1

这个是和 ECMAScript 标准相干的，工作机制和 ES 5 的严格模式一样，并且输入的 JS 顶部也会也会带上 ‘use strict’。

noImplicitAny（举荐关上）

默认：true

首次公布版本：-

我在 – TypeScript 类型零碎中提到了如果不对变量显式申明类型，那么 TypeScript 会对变量进行类型推导，这当然也有推导不出的状况，这个时候该变量的类型就是 any，这个叫做隐式 any。区别于显式 any：

const a: any = {};

隐式 any 是 TypeScript 编译器推断的。

noImplicitThis（举荐关上）

默认：true

首次公布版本：2.0

和隐式 any 类型，只不过这次是针对的非凡的一个关键字 this，也就是你须要显式地指定 this 的类型。

strict（举荐关上）

默认：true

首次公布版本：2.3

实际上 strict 只是一个简写，是多个规定的合集。相似于 babel 中插件（plugins）和预设（presets）的差异。换句话说如果你指定了 strict 为 true，那么所有严格相干的规定的都会开启，我所讲的 严格查看 都是，还有一部分我没有提到的。另外未来如果减少更多严格规定，你只有开启了 strict 则会主动加进来。

目标：allowSyntheticDefaultImports，allowUmdGlobalAccess，esModuleInterop，moduleResolution 都是为了和其余模块化标准兼容做的。

allowSyntheticDefaultImports
allowUmdGlobalAccess
esModuleInterop
moduleResolution

还有一个配置 module，规定了我的项目的模块化形式，选项有 AMD，UMD，commonjs 等。

目标：baseUrl，paths，rootDirs，typeRoots，types 都是为了简化门路的拼写做的。

baseUrl

这个配置是通知 TypeScript 如何解析模块门路的。比方：

import {helloWorld} from "hello/world";

console.log(helloWorld);

这个就会从 baseUrl 下找 hello 目录下的 world 文件。

paths

定义相似别名的存在，从而简化门路的书写。

rootDirs

留神是 rootDirs，而不是 rootDir，也就是说根目录能够有多个。当你指定了多个根目录的时候，不同根目录的文件能够像在一个目录下一样相互拜访。

实际上也有一个叫 rootDir 的，和 rootDirs 的区别就是其只能指定一个。

typeRoots
types

types 和 typeRoots 我在 – types 和 @types 是什么？曾经讲得很分明了，这里就不多说了。

allowJs

默认：false

首次公布版本：1.8

顾名思义，容许在 TypeScript 我的项目中应用 JavaScript，这在从 JavaScript 迁徙到 TypeScript 中是十分重要的。

checkJs

默认：false

首次公布版本：-

和 allowJs 相似，只不过 checkJs 会额定对 JS 文件进行校验。

如果 TypeScript 是将 TS 文件编译为 JS，那么申明文件 + JS 文件就能够反推出 TS 文件。

这两个用来生成 .d.ts 和 .d.ts 的 sourcemap 文件。

declaration

默认：false

首次公布版本：1.0

declarationMap

默认：false

首次公布版本：2.9

默认：react

首次公布版本：2.2

这个是通知 TypeScript 如何编译 jsx 语法的。

默认：-

首次公布版本：2.0

lib 我在 TypeScript 类型零碎中讲过。Typescript 提供了诸如 lib.d.ts 等类型库文件。随着 ES 的不断更新，JavaScript 类型和全局变量会逐步变多。Typescript 也是采纳这种 lib 的形式来解决的。

（TypeScript 提供的局部 lib）

outDir 和 outFile 这两个配置则是通知 TypeScript 将文件生成到哪里。

outDir

默认：和 ts 文件同目录（且同名，只是后缀不同）

首次公布版本：-

outFile

默认：-

首次公布版本：1.0

module 是 CommonJS 和 ES6 module 不能晓得 outFile，只有是 None, System 或 AMD 才行，其会将这些模块的文件内容打包到全局文件内容之后。

而 noEmit 则是管制是否输入 JS 文件的。

noEmit

默认：false

首次公布版本：-

如果你只心愿用 TypeScript 进行类型查看，不心愿要它生成文件，则能够将 noEmit 设置成 true。

target

即输入的 JavaScript 对标的 ECMA 标准。比方“target”:“es6”就是将 es6 + 的语法转换为 ES6 的代码。其选项有 ES3，ES5，ES6 等。

为什么没有 ES4？^_^

tsconfig 就是一个 JSON 文件，TypeScript 会应用该文件来决定如何编译和查看 TypeScript 我的项目。和 babel 相似，甚至很多配置项都是相通的。
如果一个目录下存在一个 tsconfig.json 文件，那么意味着这个目录是 TypeScript 我的项目的根目录。如果你应用 tsc 编译你的我的项目，并且没有显式地指定配置文件的门路，那么 tsc 则会逐级向上搜寻父目录寻找 tsconfig.json，这个过程相似 node 的模块查找机制。
tsconfig 中最重要的恐怕就是编译器选项（compilerOptions）了。如果你依照性能去记忆则会比较简单，比方文件相干的有哪些，严格查看的有哪些，申明文件的有哪些等等。

typescriptlang’s tsconfig

大家也能够关注我的公众号《脑洞前端》获取更多更陈腐的前端硬核文章，带你意识你不晓得的前端。

知乎专栏【Lucifer – 知乎】

点关注，不迷路！

关于typescript:typeScript-配置文件该怎么写

前言

初探 tsconfig

tsconfig 是如何被解析的？

tsconfig 的顶层属性

tsconfig 的编译项

文件相干

严格查看

模块解析

模块相干

门路相干

我的项目配置

JavaScript 相干

申明文件相干

内部库相干

输入相干

总结

参考

关注我