tsconfig.json 配置文件中配置项详解

目前，对于 tsconfig.json 配置文件中配置项的相关解释并不完成，有使用到新的配置项才进行相关记录

文章归档：https://www.yuque.com/u27599042/wypqhp/gbtboaotepoqt6et

compilerOptions

在该配置项中的配置，是与 TypeScript 编译器编译 TS 代码相关的配置，即在该配置项中的配置用于控制 TypeScript 编译器如何将 TS 代码编译成 JS 代码，编译成什么样的 JS 代码。

typeRoots

该配置项用于控制项目中引入包含什么目录下的类型声明文件。

默认所有可见的 @types 包会在编译过程中被包含进来。

TS 中文文档：https://www.tslang.cn/docs/handbook/tsconfig-json.html#types-typeroots-and-types**

"typeRoots" : ["./typings"]

types

该配置项用于控制项目中引入包含 node_modules/@types 里面的哪些包，node_modules/@types 中存放的为第三方库的 TS 类型声明文件。

如果使用了 typeRoots 配置项，则该配置项用于控制项目中引入包含 typeRoots 配置项指定的目录中的哪些包。

默认所有可见的 @types 包会在编译过程中被包含进来。

TS 中文文档：https://www.tslang.cn/docs/handbook/tsconfig-json.html#types-typeroots-and-types

"types" : ["node", "lodash", "express"]

target

该配置项用于配置 TS 代码编译成什么目标版本的 JS 代码，指定 ECMAScript 目标版本。

可选值：

• “ES3”（默认）
• “ES5”
• “ES6”/ “ES2015”
• “ES2016”
• “ES2017”
• “ES2020”
• “ESNext”（最新版本）

module

TS 代码编译成使用什么样的模块化标准的 JS 代码。

可选值：

• “None”
• “CommonJS”
• “AMD”
• “System”
  • 只有 “AMD” 和 “System” 能和 outFile 配置项一起使用
• “UMD”
• “ES6” / “ES2015”
  • “ES6” 和 “ES2015” 可以使用在 TS 代码编译成的 JS 代码的目标版本为 “ES5” 或更低的情况下
• “ES2020”
• “ESNext”（最新版本）

allowJs

该配置项用于配置是否允许在项目中使用 js 文件，默认 false，即默认情况下不允许在项目中使用 js 文件。

sourceMap

该配置项用于配置是否生成 TS 代码转换成 JS 代码时的源码映射文件，生成的文件本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。

生成 TS 代码转换成 JS 代码时的源码映射文件，有利于我们在报错时对源码进行 DEBUG。

sourceMap 的默认值为 false。

useDefineForClassFields

是否将 class 声明中的字段语义从 [[Set]] 变更到 [[Define]]

关于开启 useDefineForClassFields 后，TS 代码编译结果的不同可以参考：https://blog.csdn.net/weixin_40013817/article/details/127200990

lib

编译过程中需要引入的库。

可选值参考：https://www.tslang.cn/docs/handbook/compiler-options.html

skipLibCheck

是否忽略对所有的声明文件（ *.d.ts）的类型检查

moduleResolution

该配置项用于配置 TS 编译器的模块解析策略，是指 TS 编译器在查找代码中的导入模块内容时所遵循的流程，即 TS 编译器如何寻找到代码中的导入模块。

当 module 配置项的值为 AMD | System | ES2015 时，moduleResolution 配置项的默认值为 Classic，其它情况时则为 Node 。

关于 Node 与 Classic 两种模块解析策略是如何寻找导入模块的，可以参考：https://blog.csdn.net/weixin_40013817/article/details/127200965

可选值：

• “Node”：表示模块解析策略使用 Node.js 的模块解析算法。在这种情况下，TypeScript 会按照 Node.js 的模块查找规则来查找模块，并且允许使用 Node.js 的内置模块、第三方模块以及项目中的自定义模块。
• “Classic”：以前是 TypeScript 默认的解析策略
• “Bundler”：表示模块解析策略使用的是打包工具。在这种情况下，编译器会假设模块已经通过打包工具进行了打包，并且可以通过打包后的文件路径进行解析，这意味着编译器不会再去查找模块的源文件，而是直接使用打包后的文件路径进行导入。这种模块解析策略适用于使用打包工具进行项目构建的情况，可以提高编译速度并减少对源文件的依赖。然而，需要注意的是，使用 “bundler” 模块解析策略时，你需要确保打包工具正确地处理了模块的导入和解析。

allowImportingTsExtensions

是否允许导入 TypeScript 文件时省略文件的后缀。

resolveJsonModule

是否允许 JSON 文件作为模块导入。

isolatedModules

是否将每个文件作为单独的模块。

noEmit

是否不生成 TS 代码编译成 JS 代码的输出文件。

jsx

配置对于代码中的 jsx 代码如何处理：

• preserve：编译后生成的代码中会保留 JSX 代码，后续代码的使用需要代码转换工具进行转换操作，如 Babel，输出文件会带有 .jsx 扩展名。
• react：会生成 React.createElement，在使用前不需要再进行转换操作了，输出文件的扩展名为 .js。
• react-native：相当于 preserve，也会保留所有的 JSX，但是输出文件的扩展名是 .js

strict

是否开启所有严格模式选项

forceConsistentCasingInFileNames

是否强制代码中使用的模块文件名必须和文件系统中的文件名保持大小写一致。

假设有一个文件名为 FileName.ts，当我们从这个文件中引入时，默认可以忽略大小写，我们使用小写的引入，也不会报错，import { xxx } from './FileName';，但当我们开启 forceConsistentCasingInFileNames 为 true 时，代码中使用的模块文件名必须和文件系统中的文件名保持大小写一致，import { xxx } from './FileName';

allowSyntheticDefaultImports

是否允许从没有设置默认导出的模块中默认导入。

这并不影响代码的输出，仅为了类型检查。

noUnusedLocals

对于没有使用的局部变量是否报错

noUnusedParameters

对于没有使用的参数是否报错

noFallthroughCasesInSwitch

对于 switch 语句中的 case 穿透是否报错

noImplicitAny

对于在表达式和声明上有隐含的 any 类型时是否报错

baseUrl

解析非相对模块名的基准目录，即从哪个目录开始查找非相对模块

paths

配置模块名基于 baseUrl 配置的基准目录的路径映射，用于将代码中使用的导入模块路径映射到基准目录下的特定路径。

配置项目根目录下 src 目录的别名为 @，在 tsconfig.json 文件中需要添加如下配置：

{
  "compilerOptions": {
    //...
    // 解析非相对模块名的基准目录，从当前 tsconfig.json 文件所在的目录开始查找
    // 由于 tsconfig.json 文件在项目根目录中，所以从项目根目录开始查找
    "baseUrl": ".",
    // 配置模块名基于 baseUrl 配置的基准目录的路径映射
    "paths": {
      // 配置项目根目录下 src 目录的别名为 @
      "@/*": [
        "src/*"
      ]
    }
    //...
  }
}

include

该配置项用于配置哪些文件需要 TypeScript 编译器进行处理，将其编译为 JS 代码。

  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],

exclude

该配置项用于配置哪些文件不需要 TypeScript 编译器进行处理。

exclude 表示要排除的，不编译的文件，它也可以指定一个列表，规则和 include 一样，可以是文件可以是文件夹，可以是相对路径或绝对路径，可以使用通配符

  "exclude": ["node_modules"],

extends

extends 可以通过指定一个其他的 tsconfig.json 文件路径，来继承这个配置文件里的配置，继承来的文件中的配置会先加载，然后加载当前配置文件里的配置，如果继承的配置文件中的配置与当前配置文件中的配置冲突，则来自继承的文件里的配置会被当前文件定义的配置覆盖。

如果发现配置文件的循环引用，则会报错。

references

在该配置项中，我们可以将其他项目引入到当前配置文件所在的项目中

  "references": [{ "path": "./tsconfig.node.json" }]