详解如何配置tsconfig.json

发布网友 发布时间：2024-09-27 18:18

我来回答

共1个回答

热心网友 时间：2024-10-04 13:23

tsconfig.JSON是TypeScript项目的配置文件，这个文件所在目录就是TypeScript项目的根目录。那么如何去配置它呢？今天就来学习一下吧！

tsconfig.json包含TypeScript编译的相关配置，通过更改编译配置项，我们可以让TypeScript编译出ES6、ES5、node的代码。

编译选项是TypeScript配置的核心部分，compilerOptions内的配置根据功能可以分为6个部分

1、项目选项

这些选项用于配置项目的运行时期望、转译JavaScript的输出方式和位置，以及与现有JavaScript代码的集成级别。

2、target

target选项用来指定TypeScript编译代码的目标，不同的目标将影响代码中使用的特性是否会被降级。

target的可选值包括ES3、ES5、ES6、ES7、ES2017、ES2018、ES2019、ES2020、ESNext这几种。

一般情况下，target的默认值为ES3，如果不配置选项的话，代码中使用的ES6特性，比如箭头函数会被转换成等价的函数表达式。

3、mole

mole选项可以用来设置TypeScript代码所使用的模块系统。

如果target的值设置为ES3、ES5，那么mole的默认值则为CommonJS；如果target的值为ES6或者更高，那么mole的默认值则为ES6。

另外，mole还支持ES2020、UMD、AMD、System、ESNext、None的选项。

4、jsx

jsx选项用来控制jsx文件转译成JavaScript的输出方式。该选项只影响.tsx文件的JS文件输出，并且没有默认值选项。

react:将jsx改为等价的对React.createElement的调用，并生成.js文件。

react-jsx:改为__jsx调用，并生成.js文件。

react-jsxdev:改为__jsx调用，并生成.js文件。

preserve:不对jsx进行改变，并生成.jsx文件。

react-native:不对jsx进行改变，并生成.js文件。

5、incremental

incremental选项用来表示是否启动增量编译。incremental为true时，则会将上次编译的工程图信息保存到磁盘上的文件中。

6、declaration

declaration选项用来表示是否为项目中的TypeScript或JavaScript文件生成.d.ts文件，这些.d.ts文件描述了模块导出的API类型。

具体的行为你可以在Playground中编写代码，并在右侧的.D.TS观察输出。

7、sourceMap

sourceMap选项用来表示是否生成sourcemap文件，这些文件允许调试器和其他工具在使用实际生成的JavaScript文件时，显示原始的TypeScript代码。

Sourcemap文件以.js.map（或.jsx.map）文件的形式被生成到与.js文件相对应的同一个目录下。

8、lib

安装TypeScript时会顺带安装一个lib.d.ts声明文件，并且默认包含了ES5、DOM、WebWorker、ScriptHost的库定义。

lib配置项允许我们更细粒度地控制代码运行时的库定义文件，比如说Node.js程序，由于并不依赖浏览器环境，因此不需要包含DOM类型定义；而如果需要使用一些最新的、高级ES特性，则需要包含ESNext类型。

TypeScript兼容JavaScript的代码，默认选项允许相当大的灵活性来适应这些模式。

在迁移JavaScript代码时，你可以先暂时关闭一些严格模式的设置。在正式的TypeScript项目中，我推荐开启strict设置启用更严格的类型检查，以减少错误的发生。

strict

开启strict选项时，一般我们会同时开启一系列的类型检查选项，以便更好地保证程序的正确性。

strict为true时，一般我们会开启以下编译配置。

alwaysStrict：保证编译出的文件是ECMAScript的严格模式，并且每个文件的头部会添加'usestrict'。

strictNullChecks：更严格地检查null和undefined类型，比如数组的find方法的返回类型将是更严格的T|undefined。

strictBindCallApply：更严格地检查call、bind、apply函数的调用，比如会检查参数的类型与函数类型是否一致。

strictFunctionTypes：更严格地检查函数参数类型和类型兼容性。

strictPropertyInitialization：更严格地检查类属性初始化，如果类的属性没有初始化，则会提示错误。

noImplicitAny：禁止隐式any类型，需要显式指定类型。TypeScript在不能根据上下文推断出类型时，会回退到any类型。

noImplicitThis：禁止隐式this类型，需要显示指定this的类型。

TypeScript支持一些额外的代码检查，在某种程度上介于编译器与静态分析工具之间。如果你想要更多的代码检查，可能更适合使用ESLint这类工具。

noImplicitReturns：禁止隐式返回。如果代码的逻辑分支中有返回，则所有的逻辑分支都应该有返回。

noUnusedLocals：禁止未使用的本地变量。如果一个本地变量声明未被使用，则会抛出错误。

noUnusedParameters：禁止未使用的函数参数。如果函数的参数未被使用，则会抛出错误。

noFallthroughCasesInSwitch：禁止switch语句中的穿透的情况。开启noFallthroughCasesInSwitch后，如果switch语句的流程分支中没有break或return，则会抛出错误，从而避免了意外的swtich判断穿透导致的问题。

模块解析部分的编译配置会影响代码中模块导入以及编译相关的配置。

moleResolution

用来指定模块解析策略。mole配置值为AMD、UMD、System、ES6时，moleResolution默认为classic，否则为node。在目前的新代码中，我们一般都是使用node，而不使用classic。

baseUrl

指的是基准目录，用来设置解析非绝对路径模块名时的基准目录。比如设置baseUrl为'./'时，TypeScript将会从tsconfig.json所在的目录开始查找文件。

paths

指的是路径设置，用来将模块路径重新映射到相对于baseUrl定位的其他路径配置。这里我们可以将paths理解为webpack的alias别名配置。

rootDirs

可以指定多个目录作为根目录。这将允许编译器在这些“虚拟”目录中解析相对应的模块导入，就像它们被合并到同一目录中一样。

typeRoots

用来指定类型文件的根目录。在默认情况下，所有node_moles/@types中的任何包都被认为是可见的。如果手动指定了typeRoots，则仅会从指定的目录里查找类型文件。

types

在默认情况下，所有的typeRoots包都将被包含在编译过程中。

allowSyntheticDefaultImports

allowSyntheticDefaultImports****允许合成默认导出。

当allowSyntheticDefaultImports设置为true，即使一个模块没有默认导出（exportdefault），我们也可以在其他模块中像导入包含默认导出模块一样的方式导入这个模块

esMoleInterop

指的是ES模块的互操作性。

在默认情况下，TypeScript像ES6模块一样对待CommonJS/AMD/UMD，但是此时的TypeScript代码转移会导致不符合ES6模块规范。不过，开启esMoleInterop后，这些问题都将得到修复。

一般情况下，在启用esMoleInterop时，我们将同时启用allowSyntheticDefaultImports。

SourceMaps为了支持丰富的调试工具，并为开发人员提供有意义的崩溃报告，TypeScript支持生成符合JavaScriptSourceMap标准的附加文件（即.map文件）。

sourceRoot

用来指定调试器需要定位的TypeScript文件位置，而不是相对于源文件的路径。sourceRoot的取值可以是路径或者URL。

mapRoot

用来指定调试器需要定位的sourcemap文件的位置，而不是生成的文件位置。

inlineSourceMap

开启inlineSourceMap选项时，将不会生成.js.map文件，而是将sourcemap文件内容生成内联字符串写入对应的.js文件中。虽然这样会生成较大的JS文件，但是在不支持.map调试的环境下将会很方便。

inlineSources

开启inlineSources选项时，将会把源文件的所有内容生成内联字符串并写入sourcemap中。这个选项的用途和inlineSourceMap是一样的。

skipLibCheck

开启skipLibCheck****选项，表示可以跳过检查声明文件。

如果我们开启了这个选项，则可以节省编译期的时间，但可能会牺牲类型系统的准确性。在设置该选项时，我推荐值为true**。**

forceConsistentCasingInFileNames

TypeScript对文件的大小写是敏感的。如果有一部分的开发人员在大小写敏感的系统开发，而另一部分的开发人员在大小写不敏感的系统开发，则可能会出现问题。

开启此选项后，如果开发人员正在使用和系统不一致的大小写规则，则会抛出错误。

include

用来指定需要包括在TypeScript项目中的文件或者文件匹配路径。如果我们指定了files配置项，则include的默认值为[]，否则include默认值为["**/*"]，即包含了目录下的所有文件。

如果glob匹配的文件中没有包含文件的扩展名，则只有files支持的扩展名会被包含。一般来说，include的默认值为.ts、.tsx和.d.ts。如果我们开启了allowJs选项，还包括.js和.jsx文件。

exclude

用来指定解析include配置中需要跳过的文件或者文件匹配路径。一般来说，exclude的默认值为["node_moles","bower_components","jspm_packages"]。

files

用来指定TypeScript项目中需要包含的文件列表。如果项目非常小，那么我们可以使用files指定项目的文件，否则更适合使用include指定项目文件。

extends

它的配置项的值是一个字符串，用来声明当前配置需要继承的另外一个配置的路径，这个路径使用Node.js风格的解析模式。TypeScript首先会加载extends的配置文件，然后使用当前的tsconfig.json文件里的配置覆盖继承的文件里的配置。

TypeScript会基于当前tsconfig.json配置文件的路径解析所继承的配置文件中出现的相对路径。

tsconfig.json配置：如何定制TypeScript的行为？

模块解析策略

TypeScript源码