关于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 相干

申明文件相干

内部库相干

输入相干

总结

参考

关注我

Just My Socks（注册教程内含优惠码）

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

前言

初探 tsconfig

tsconfig 是如何被解析的？

tsconfig 的顶层属性

tsconfig 的编译项

文件相干

严格查看

模块解析

模块相干

门路相干

我的项目配置

JavaScript 相干

申明文件相干

内部库相干

输入相干

总结

参考

关注我

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）