【从零搭建税务自动化系统-前端篇】tsconfig.json文件配置

​

配置项	说明
extends	tsconfig.json可以继承另一个tsconfig.json文件的配置。如果一个项目有多个配置，可以把共同的配置写成tsconfig.base.json，其他的配置文件继承该文件，这样便于维护和修改。 extends属性用来指定所要继承的配置文件。它可以是本地文件。 { "extends": "../tsconfig.base.json" } 如果extends属性指定的路径不是以./或../开头，那么编译器将在node_modules目录下查找指定的配置文件。 extends属性也可以继承已发布的 npm 模块里面的 tsconfig 文件。 { "extends": "@tsconfig/node12/tsconfig.json" } extends指定的tsconfig.json会先加载，然后加载当前的tsconfig.json。如果两者有重名的属性，后者会覆盖前者。
compileOnSave(保存时编译)	可以让IDE在保存文件的时候根据tsconfig.json重新生成文件，该特性需要Visual Studio 2015、TypeScript1.8.4以上并且安装atom-typescript插件
compilerOptions(编译选项)	详情见：compilerOptions编译选项
files	用来指定要编译的文件 属性指定编译的文件列表，如果其中有一个文件不存在，就会报错。 它是一个数组，排在前面的文件先编译。 { "files": ["a.ts", "b.ts"] } 该属性必须逐一列出文件，不支持文件匹配。如果文件较多，建议使用include和exclude属性。
include	用来指定要编译要包含的路径列表，和files的区别在于，这里的路径可以是文件夹，也可以是文件，可以使用相对和绝对路径 属性指定所要编译的文件列表，既支持逐一列出文件，也支持通配符。文件位置相对于当前配置文件而定。 { "include": ["src/**/*", "tests/**/*"] } include属性支持三种通配符。 ?：指代单个字符 *：指代任意字符，不含路径分隔符 **：指定任意目录层级。 如果不指定文件后缀名，默认包括.ts、.tsx和.d.ts文件。如果打开了allowJs，那么还包括.js和.jsx。
exclude	exclude属性是一个数组，必须与include属性一起使用，用来从编译列表中去除指定的文件。它也支持使用与include属性相同的通配符。 { "include": ["**/*"], "exclude": ["**/*.spec.ts"] }
references	一个对象的数组，指明要引用的工程。适合一个大项目由许多小项目构成的情况，用来设置需要引用的底层项目。 { "references": [ { "path": "../pkg1" }, { "path": "../pkg2/tsconfig.json" } ] } references数组成员对象的path属性，既可以是含有文件tsconfig.json的目录，也可以直接是该文件。 与此同时，引用的底层项目的tsconfig.json必须启用composite属性。

compilerOptions 编译选项

选项	类型	默认值	说明
allowJs	boolean	false	允许编译器编译JS，JSX文件
checkJs	boolean	false	在.js文件中报告错误，与allowJS配合使用
esModuleInterop	boolean	false	修复了一些 CommonJS 和 ES6 模块之间的兼容性问题。 如果module属性为node16或nodenext，则esModuleInterop默认为true，其他情况默认为false。 打开这个属性，使用import命令加载 CommonJS 模块时，TypeScript 会严格检查兼容性问题是否存在。 import * as moment from "moment"; moment(); // 报错 上面示例中，根据 ES6 规范，import * as moment里面的moment是一个对象，不能当作函数调用，所以第二行报错了。 解决方法就是改写上面的语句，改成加载默认接口。 import moment from "moment"; moment(); // 不报错 打开esModuleInterop以后，如果将上面的代码编译成 CommonJS 模块格式，就会加入一些辅助函数，保证编译后的代码行为正确。 注意，打开esModuleInterop，将自动打开allowSyntheticDefaultImports。
allowSyntheticDefaultImports	boolean	false	允许从没有设置默认到处的模块中默认导入。这并不影响代码的输出，仅为了类型检查。默认值：module === "system" 或设置了 --esModuleInterop 且 module 不为 es2015 / esnext
target	string	ES3	指定编译出来的 JavaScript 代码的 ECMAScript 版本，比如es2021，默认是es3。 它可以取以下值。 es3 es5 es6/es2015 es2016 es2017 es2018 es2019 es2020 es2021 es2022 esnext 注意，如果编译的目标版本过老，比如"target": "es3"，有些语法可能无法编译，tsc命令会报错。
module	string	target === ES6 ? ES6 : commonjs	指定编译产物的模块格式。它的默认值与target属性有关，如果target是ES3或ES5，它的默认值是commonjs，否则就是ES6/ES2015。 { "compilerOptions": { "module": "commonjs" } } 它可以取以下值：none、commonjs、amd、umd、system、es6/es2015、es2020、es2022、esnext、node16、nodenext。
moduleResolution	string	node	模块解析策略，确定模块路径的算法，即如何查找模块。它可以取以下四种值。 node：采用 Node.js 的 CommonJS 模块算法。 node16或nodenext：采用 Node.js 的 ECMAScript 模块算法，从 TypeScript 4.7 开始支持。 classic：TypeScript 1.6 之前的算法，新项目不建议使用。 它的默认值与module属性有关，如果module为AMD、UMD、System或ES6/ES2015，默认值为classic；如果module为node16或nodenext，默认值为这两个值；其他情况下,默认值为Node。
declaration	boolean	false	设置编译时是否为每个脚本生成类型声明文件.d.ts
declarationDir	string	“”	设置生成的.d.ts文件所在的目录。
outDir	string		用来指定编译后文件的存放位置，如未指定，输出文件会和编译文件在同一目录
rootDir	string		用来指定编译文件的根目录，编译器会在根目录查找入口文件，如果编译器发现以rootDir的值作为根目录查找入口文件并不会把所有文件加载进去的话会报错，但是不会停止编译
baseUrl	string	tsconfig.json文件所在目录	用于设置解析非相对模块名称的基本目录，相对模块不会受baseUrl的影响 { "compilerOptions": { "baseUrl": "./" } } 上面示例中，baseUrl为当前目录./。那么，当遇到下面的语句，TypeScript 将以./为起点，寻找hello/world.ts。 import { helloWorld } from "hello/world";
paths	object		当我们使用 TypeScript 开发项目时，通常会引用其他模块或文件。为了避免使用相对路径进行引用，我们可以使用路径配置来简化引用的过程。路径配置可以将特定的目录映射到一个短的名称上，从而在引用其他模块时可以使用这个短名称进行引用，而不用关心模块的实际目录结构 {   "compilerOptions": {     "baseUrl": "./src",     "paths": {       "@utils/*": ["utils/*"],       "@components/*": ["components/*"]     }   } } 在上述配置中，我们使用 “baseUrl” 属性指定了基础目录，然后使用 “paths” 属性来配置具体的路径映射。 在该示例配置中，我们定义了两个路径映射： “@utils/“: [“utils/“]，表示将 “@utils/” 这种路径映射到 “utils/” 目录下； “@components/“: [“components/“]，表示将 “@components/” 这种路径映射到 “components/” 目录下。 这样，我们在项目中引用这些模块时，可以使用短名称进行引用，例如：import { demoUtil } from ‘@utils/demoUtil’。
alwaysStrict	boolean	false	编译后的文件是否开启严格模式。在代码中注入‘use strict’，以严格模式上解析并为每个源文件生成“use strict”语句。
strict	boolean	false	是否开启严格检查
noEmit	boolean	false	是否不生成编译文件，即编译后不生成任何js文件
noImplicitAny	boolean	false	是否不允许隐式的any，在表达式和声明上有隐含的 any类型时报错。默认false（允许）。
noImplicitReturns	boolean	false	检查函数有没有返回值，设为true后，如果函数没有返回值则会提示
noUnusedLocals	boolean	false	是否检查有没有未使用的局部变量，若有未使用的局部变量则抛错
noUnusedParameters	boolean	false	检若有未使用的函数参数则抛错
newLine	string	lf	newLine设置换行符为CRLF（Windows）还是LF（Linux）
strictNullChecks	boolean	false	是否严格检查空值，检查有可能为null的地方
lib	array	es5	在TypeScript中，我们可以使用各种JavaScript库和框架，如Node.js、DOM、Web Worker、Web Assembly等。然而，不同的JavaScript库提供了不同的全局对象和函数。编写TypeScript代码时，我们通常需要在代码中使用这些全局对象和函数。为了让编译器能够识别我们使用的是哪些全局对象和函数，我们可以使用”lib”选项来告诉编译器。 “lib”选项接受一个数组作为值，这个数组包含了我们要使用的JavaScript库的名称。TypeScript编译器将根据这个选项加载相应的定义文件（.d.ts文件），这些定义文件包含了对应JavaScript库的类型声明。通过这种方式，编译器就能够理解我们在代码中使用的全局对象和函数是哪些，以及它们的类型信息。 { "compilerOptions": { "lib": ["dom", "es2021"] } } TypeScript 内置的类型描述文件，主要有以下一些: ES5 ES2015 ES6 ES2016 ES7 ES2017 ES2018 ES2019 ES2020 ES2021 ES2022 ESNex DOM WebWorker ScriptHost
sourceMap	boolean	false	是否生成sourceMap文件，这个文件里保存的是转换后代码的位置，和对应的转换前的位置。有了它，出错的时候，通过断点工具可以直接显示原始代码，而不是转换后的代码
composite	boolean		打开某些设置，使得 TypeScript 项目可以进行增量构建，往往跟incremental属性配合使用。
incremental	boolean	false	让 TypeScript 项目构建时产生文件tsbuildinfo，从而完成增量构建
isolatedModules	boolean	false	设置如果当前 TypeScript 脚本作为单个模块编译，是否会因为缺少其他脚本的类型信息而报错，主要便于非官方的编译工具（比如 Babel）正确编译单个脚本。
jsx	string		设置如何处理.tsx文件。它一般以下三个值。 preserve：保持 jsx 语法不变，输出的文件名为 jsx。 react：将<div />编译成React.createElement("div")，输出的文件名为.js。 react-native：保持 jsx 语法不变，输出的文件后缀名为.js。
listFiles	boolean	false	设置编译时在终端显示，参与本次编译的文件列表。
typeRoots	array		设置类型模块所在的目录，默认是node_modules/@types { "compilerOptions": { "typeRoots": ["./typings", "./vendor/types"] } }
types	array		设置typeRoots目录下需要包括在编译之中的类型模块。默认情况下，该目录下的所有类型模块，都会自动包括在编译之中。 { "compilerOptions": { "types": ["node", "jest", "express"] } }
skipLibCheck	boolean	false	用于控制是否跳过对声明文件（.d.ts文件）的类型检查。 当我们引用的库或模块非常庞大且复杂时，类型检查会花费很多时间。特别是某些第三方库的声明文件可能被完全忽略，这会导致编译时间过长。为了解决这个问题，我们可以使用’skipLibCheck’参数来跳过对声明文件的类型检查，从而提高编译速度

​