如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。
如果你使用 tsc 编译你的项目，并且没有显式地指定配置文件的路径，那么 tsc 则会逐级向上搜索父目录寻找 tsconfig.json ，这个过程类似 node 的模块查找机制。<br />
typeScript 编译器会接受文件或者文件集合作为输入，最终转换为 JavaScript（noEmit 为 false） 和 .d.ts(declarations 为 true)。
image.png
tsconfig 的 所有配置 http://json.schemastore.org/tsconfig

tsconfig 的顶层属性（Top Level）

主要有：compilerOptions, files, include, exclude,extends,compileOnSave等。

  • compilerOptions 是重头戏，其属性也是最多的，项目也是对这个定制比较多
  • files 则是你需要编译的文件
  • exclude 则是你不需要编译的文件目录（支持 glob）
  • include 是你需要编译的文件目录（支持 glob）

  • extends 就是继承另外一个配置文件，TypeScript 会对其进行合并，多项目公共配置有用。可以直接继承社区的“最佳实践”，比如:

    1. {
    2. "extends": "@tsconfig/node12/tsconfig.json",
    3. "compilerOptions": {},
    4. "include": ["src/**/*"],
    5. "exclude": ["node_modules"]
    6. }

  • compileOnSave 则是和编辑器（确切地说是文件系统）联动的配置，即是否在文件保存后进行编译，实际项目不建议使用。

    tsconfig 的编译项

    文件相关

    常用的是以下四个

  • exclude

  • extends
  • files
  • include

  • alwaysStrict

    严格检查

    alwaysStrict 默认：false

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

    noImplicitAny（推荐打开） 默认：true

    首次发布版本：-
    我在 - TypeScript 类型系统 中提到了如果不对变量显式声明类型，那么 TypeScript 会对变量进行类型推导，这当然也有推导不出的情况，这个时候该变量的类型就是 any，这个叫做隐式 any。区别于显式 any：

    1. const a: any = {};

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

    noImplicitThis（推荐打开） 默认：true

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

    strict（推荐打开） 默认：true

    实际上 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 如何解析模块路径的。比如：

  1. import { helloWorld } from "hello/world";
  2. console.log(helloWorld);

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

  • paths

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

  • rootDirs

注意是 rootDirs ，而不是 rootDir，也就是说根目录可以有多个。 当你指定了多个根目录的时候， 不同根目录的文件可以像在一个目录下一样互相访问。

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

  • typeRoots
  • types

types 和 typeRoots types 和 @types 是什么？

项目配置

JavaScript 相关

  • allowJs 默认：false

顾名思义，允许在 TypeScript 项目中使用 JavaScript，这在从 JavaScript 迁移到 TypeScript 中是非常重要的。

  • checkJs 默认：false

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

声明文件相关

如果 TypeScript 是将 TS 文件编译为 JS，那么声明文件 + JS 文件就可以反推出 TS 文件。
这两个用来生成 .d.ts 和 .d.ts 的 sourcemap 文件。

  • declaration 默认：false

  • declarationMap 默认：false

    外部库相关

  • jsx 默认：react

这个是告诉 TypeScript 如何编译 jsx 语法的。

  • lib 默认：-

lib TypeScript 类型系统 中有。 Typescript 提供了诸如 lib.d.ts 等类型库文件。随着 ES 的不断更新， JavaScript 类型和全局变量会逐渐变多。Typescript 也是采用这种 lib 的方式来解决的。
tsconfig.json - 图2

输出相关

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

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

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 等。

https://www.tslang.cn/docs/handbook/tsconfig-json.html https://lucifer.ren/blog/2020/08/24/ts-config/