tsconfig.json是TypeScript项目的配置文件。如果某个目录下有tsconfig.json文件，通常表示这个目录是TypeScript项目的根目录。tsconfig.json包含TypeScript编译的相关配置。通过更改编译配置项，我们可以让TypeScript编译ES6、ES5和node代码。本文将分别介绍tsconfig.json中的相关配置选项，重点介绍比较重要的编译选项。compilerOptions编译选项是TypeScript配置的核心部分。compilerOptions中的配置按照功能分为6个部分。接下来我们分别介绍一下。项目选项这些选项用于配置项目的运行时期望、转译后的JavaScript的输出方式和位置，以及与现有JavaScript代码的集成级别。target选项用于指定TypeScript编译代码的目标，不同的目标会影响代码中使用的特性是否会被降级。target的可选值包括ES3、ES5、ES6、ES7、ES2017、ES2018、ES2019、ES2020、ESNext。一般来说，target的默认值是ES3。如果没有配置选项，代码中使用的ES6特性，例如箭头函数，将被转换为等效的函数表达式。modulemodule选项可用于设置TypeScript代码使用的模块系统。如果target的值设置为ES3、ES5，那么module的默认值为CommonJS；如果target的值为ES6或更高版本，则module的默认值为ES6。此外，模块还支持ES2020、UMD、AMD、System、ESNext、None选项。jsxjsx选项用于控制将jsx文件转换为JavaScript输出的方式。该选项只影响.tsx文件的JS文件输出，没有默认值选项。反应：将jsx更改为对React.createElement的等效调用并生成一个.js文件。react-jsx：更改为__jsx调用并生成.js文件。react-jsxdev：更改为__jsx调用并生成.js文件。preserve：不改变jsx，生成.jsx文件。react-native：不修改jsx，生成.js文件。incremental增量选项用于指示是否开始增量编译。增量，当为真时，将最后编译的绘图信息保存到磁盘上的文件中。declaration声明选项用于指示是否为项目中的TypeScript或JavaScript文件生成.d.ts文件。这些.d.ts文件描述了模块导出的API类型。具体行为可以在Playground中编写代码，观察右侧.D.TS中的输出。sourceMapsourceMap选项用于指示是否生成sourcemap文件，它允许调试器和其他工具在使用实际生成的JavaScript文件时显示原始TypeScript代码。源映射文件生成为.js.map（或.jsx.map）文件，位于与.js文件相同的目录中。lib在安装TypeScript时，会随之安装一个lib.d.ts声明文件，默认包含ES5、DOM、WebWorker和ScriptHost的库定义。lib配置项可以让我们在代码运行时细粒度的控制库定义文件。例如，Node.js程序不需要包含DOM类型定义，因为它不依赖于浏览器环境；如果你需要使用一些最新的、高级的ES特性，你需要包含ESNext类型。具体细节可以查看TypeScript源码中的完整列表，自定义编译需要的lib类型定义。严格模式TypeScript与JavaScript代码兼容，默认选项允许相当大的灵活性来适应这些模式。在迁移JavaScript代码时，可以暂时关闭一些严格模式设置。在正式的TypeScript项目中，我建议打开严格设置以启用更严格的类型检查以减少错误。strict开启strict选项后，一般我们会同时开启一系列的类型检查选项，以更好的保证程序的正确性。当strict为true时，一般我们会开启以下编译配置。alwaysStrict：保证编译后的文件是ECMAScript严格模式，每个文件的头部都会加上'usestrict'。strictNullChecks：更严格地检查null和undefined类型。例如，数组的find方法的返回类型将是更严格的T|不明确的。strictBindCallApply：严格检查call、bind、apply函数的调用，比如检查参数的类型是否与函数的类型一致。strictFunctionTypes：对函数参数类型和类型兼容性进行更严格的检查。strictPropertyInitialization：更严格地检查类属性初始化。如果类属性没有初始化，会提示错误。noImplicitAny：禁止隐式any类型，需要显式指定类型。当TypeScript无法从上下文中推断类型时，它会回退到any类型。noImplicitThis：禁止隐式this类型，需要显式指定this的类型。noEmitOnError：如果报错，则停止编译，即不输出编译后的文件。注意：将strict设置为true并启用严格模式是日常学习中强烈推荐的最佳实践。额外的检查TypeScript支持一些额外的代码检查，有点介于编译器和静态分析工具之间。如果你想要更多的代码检查，像ESLint这样的工具可能更合适。noImplicitReturns：禁止隐式返回。如果代码的逻辑分支中有返回，则所有逻辑分支都应该有返回。noUnusedLocals：禁止未使用的局部变量。如果未使用局部变量声明，则会抛出错误。noUnusedParameters：禁止未使用的函数参数。如果未使用函数的参数，则会抛出错误。noFallthroughCasesInSwitch：禁用switch语句中的fallthroughcase。启用noFallthroughCasesInSwitch后，如果switch语句的流分支中没有break或return，则会抛出错误，从而避免意外的switch判断穿透带来的问题。模块分析模块分析部分的编译配置会影响代码中的模块导入和编译相关配置。moduleResolutionmoduleResolution用于指定模块解析策略。当module配置值为AMD、UMD、System、ES6时，moduleResolution默认为classic，否则为node。在目前的新代码中，我们一般使用node而不是classic。具体的模块解析策略，可以查看模块解析策略。baseUrlbaseUrl指的是基目录，用于设置解析非绝对路径模块名时的基目录。例如，当baseUrl设置为'./'时，TypeScript将开始从tsconfig.json所在的目录中搜索文件。pathspaths指的是用于将模块路径重新映射到相对于baseUrl的其他路径配置的路径设置。这里我们可以将paths理解为webpack的别名配置。我们来看一个具体的例子：{"compilerOptions":{"paths":{"@src/*":["src/*"],"@utils/*":["src/utils/*"]}}}在上面的例子中，TypeScript模块解析支持查找带有一些自定义前缀的模块，以避免代码中的相对路径过长。注意：由于paths中配置的别名只在类型检测时生效，所以在使用tsc翻译或者webpack构建TypeScript代码时，我们需要额外引入一个插件，将源码中的别名替换为正确的相对路径。rootDirsrootDirs可以指定多个目录作为根目录。这将允许编译器解析这些“虚拟”目录中的相应模块导入，就好像它们被合并到同一目录中一样。typeRootstypeRoots用于指定类型文件的根目录。默认情况下，所有node_modules/@types中的任何包都被认为是可见的。如果手动指定typeRoots，类型文件将只在指定的目录中查找。types默认情况下，所有typeRoots包都将包含在编译过程中。手动指定类型时，只有列出的包会包含在全局范围内，如下例所示：{"compilerOptions":{"types":["node","jest","express"]}}中上面的例子可以看出，手动指定类型时，只包含了node、jest、express的类型包。allowSyntheticDefaultImportsallowSyntheticDefaultImports允许合成默认导入。当allowSyntheticDefaultImports设置为true时，即使一个模块没有默认导出（exportdefault），我们也可以像导入默认导出模块一样在其他模块中导入这个模块，如下例所示：//allowSyntheticDefaultImports:true你可以使用importReactfrom'react';//allowSyntheticDefaultImports:falseimport*asReactfrom'react';在上面的例子中，对于没有默认导出的模块react，如果将allowSyntheticDefaultImports设置为true，则可以直接通过import导入react；但是如果你设置allowSyntheticDefaultImports为false的话，你需要通过import*as来导入react。esModuleInteropesModuleInterop是指ES模块互操作性。默认情况下，TypeScript将CommonJS/AMD/UMD视为ES6模块，但此时TypeScript代码传输将导致不符合ES6模块规范。然而，当esModuleInterop被打开时，这些问题将被修复。通常情况下，在开启esModuleInterop的时候，我们会同时开启allowSyntheticDefaultImports。SourceMaps为了支持丰富的调试工具并为开发者提供有意义的崩溃报告，TypeScript支持生成符合JavaScriptSourceMap标准的附加文件（即映射文件）。sourceRootsourceRoot用于指定调试器需要定位的TypeScript文件的位置，而不是相对于源文件的路径。sourceRoot的值可以是路径或URL。mapRootmapRoot用于指定调试器需要定位的源映射文件的位置，而不是生成文件的位置。inlineSourceMap启用inlineSourceMap选项时，不会生成.js.map文件，而是将sourcemap文件内容生成的内联字符串写入对应的.js文件中。虽然这会生成更大的JS文件，但在不支持.map调试的环境中会很方便。inlineSources当打开inlineSources选项时，源文件的所有内容将生成为内联字符串并写入源映射。此选项的用途与inlineSourceMap相同。ExperimentalOptionsTypeScript支持一些在JavaScript提案中还不稳定的语言特性，因此Experimentaloptions作为TypeScript中的实验特性存在。experimentalDecoratorsexperimentalDecorators选项打开装饰器提案的功能。目前，装饰器提案尚未完全纳入第2阶段的JavaScript规范，并且在TypeScript中实现的装饰器版本可能与JavaScript不同。emitDecoratorMetadataemitDecoratorMetadata选项允许装饰器使用反射数据功能。高级选项skipLibCheck启用skipLibCheck选项，这意味着您可以跳过检查声明文件。如果启用此选项，我们可以节省编译时间，但可能会牺牲类型系统的准确性。设置此选项时，我推荐值为true。forceConsistentCasingInFileNamesTypeScript对文件区分大小写。如果一些开发人员在区分大小写的系统上工作而另一部分在不区分大小写的系统上工作，就会出现问题。启用此选项后，如果开发者使用与系统不一致的大小写规则，将会抛出错误。includesinclude用于指定需要包含在TypeScript项目中的文件或文件匹配路径。如果我们指定files配置项，include默认值为[]，否则include默认值为["**/*"]，即包含目录下的所有文件。如果glob与不包含文件扩展名的文件匹配，则仅包含文件支持的扩展名。一般来说，include的默认值为.ts、.tsx、.d.ts。如果我们启用allowJs选项，还包括.js和.jsx文件。excludeexclude用于指定解析include配置时需要跳过的文件或文件匹配路径。一般来说，exclude的默认值是["node_modules","bower_components","jspm_packages"]。注意：exclude配置项只会改变include配置项中的结果。filesfiles选项用于指定要包含在TypeScript项目中的文件列表。如果项目很小，那么我们可以使用files来指定项目的文件，否则用include来指定项目文件比较合适。extendsextends配置项的值为字符串，用于声明当前配置需要继承的另一个配置的路径。该路径使用Node.js风格的解析方式。TypeScript会先加载extends的配置文件，然后使用当前tsconfig.json文件中的配置覆盖继承文件中的配置。TypeScript根据当前tsconfig.json配置文件的路径解析出现在继承配置文件中的相对路径。总结tsconfig.json是TypeScript项目非常重要的配置文件。这里简单总结一下编译选项中不同函数的常用选项。更多TypeScript配置可以在TSConfigReference中查看和学习。
