关于typescript:tsconfigjson-配置如何定制-TypeScript-的行为

tsconfig.json 是 TypeScript 我的项目的配置文件。如果一个目录下存在一个 tsconfig.json 文件，那么往往意味着这个目录就是 TypeScript 我的项目的根目录。

tsconfig.json 蕴含 TypeScript 编译的相干配置，通过更改编译配置项，咱们能够让 TypeScript 编译出 ES6、ES5、node 的代码。

本文将别离介绍 tsconfig.json 中的相干配置选项，并对比拟重要的编译选项进行着重介绍。

编译选项是 TypeScript 配置的外围局部，compilerOptions 内的配置依据性能能够分为 6 个局部，接下来咱们别离介绍一下。

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

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

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

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

module 选项能够用来设置 TypeScript 代码所应用的模块零碎。

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

另外，module 还反对 ES2020、UMD、AMD、System、ESNext、None 的选项。

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 文件。

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

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

具体的行为你能够在 Playground 中编写代码，并在右侧的 .D.TS 察看输入。

sourceMap 选项用来示意是否生成 sourcemap 文件，这些文件容许调试器和其余工具在应用理论生成的 JavaScript 文件时，显示原始的 TypeScript 代码。

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

装置 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 的严格模式，并且每个文件的头部会增加 ‘use strict’。
strictNullChecks：更严格地查看 null 和 undefined 类型，比方数组的 find 办法的返回类型将是更严格的 T | undefined。
strictBindCallApply：更严格地查看 call、bind、apply 函数的调用，比方会查看参数的类型与函数类型是否统一。
strictFunctionTypes：更严格地查看函数参数类型和类型兼容性。
strictPropertyInitialization：更严格地查看类属性初始化，如果类的属性没有初始化，则会提醒谬误。
noImplicitAny：禁止隐式 any 类型，须要显式指定类型。TypeScript 在不能依据上下文推断出类型时，会回退到 any 类型。
noImplicitThis：禁止隐式 this 类型，须要显示指定 this 的类型。
noEmitOnError：如果有报错将进行持续编译，也就是不输入编译文件。

留神：将 strict 设置为true，开启严格模式，是日常学习中极力推荐的最佳实际。

TypeScript 反对一些额定的代码查看，在某种程度上介于编译器与动态剖析工具之间。如果你想要更多的代码查看，可能更适宜应用 ESLint 这类工具。

noImplicitReturns：禁止隐式返回。如果代码的逻辑分支中有返回，则所有的逻辑分支都应该有返回。
noUnusedLocals：禁止未应用的本地变量。如果一个本地变量申明未被应用，则会抛出谬误。
noUnusedParameters：禁止未应用的函数参数。如果函数的参数未被应用，则会抛出谬误。
noFallthroughCasesInSwitch：禁止 switch 语句中的穿透的状况。开启 noFallthroughCasesInSwitch 后，如果 switch 语句的流程分支中没有 break 或 return，则会抛出谬误，从而防止了意外的 swtich 判断穿透导致的问题。

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

moduleResolution 用来指定模块解析策略。

module 配置值为 AMD、UMD、System、ES6 时，moduleResolution 默认为 classic，否则为 node。在目前的新代码中，咱们个别都是应用 node，而不应用 classic。

具体的模块解析策略，你能够查看模块解析策略。

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

paths 指的是门路设置，用来将模块门路从新映射到绝对于 baseUrl 定位的其余门路配置。这里咱们能够将 paths 了解为 webpack 的 alias 别名配置。

上面咱们看一个具体的示例：

{
  "compilerOptions": {
    "paths": {"@src/*": ["src/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

在下面的例子中，TypeScript 模块解析反对以一些自定义前缀来寻找模块，防止在代码中呈现过长的相对路径。

留神：因为 paths 中配置的别名仅在类型检测时失效，所以在应用 tsc 转译或者 webpack 构建 TypeScript 代码时，咱们须要引入额定的插件将源码中的别名替换成正确的相对路径。

rootDirs 能够指定多个目录作为根目录。这将容许编译器在这些“虚构”目录中解析绝对应的模块导入，就像它们被合并到同一目录中一样。

typeRoots 用来指定类型文件的根目录。

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

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

手动指定 types 时，只有列出的包才会被蕴含在全局范畴内，如下示例：

{
  "compilerOptions": {"types": ["node", "jest", "express"]
  }
}

在上述示例中能够看到，手动指定 types 时，仅蕴含了 node、jest、express 三个 node 模块的类型包。

allowSyntheticDefaultImports 容许合成默认导出。

当 allowSyntheticDefaultImports 设置为 true，即便一个模块没有默认导出（export default），咱们也能够在其余模块中像导入蕴含默认导出模块一样的形式导入这个模块，如下示例：

// allowSyntheticDefaultImports: true 能够应用
import React from 'react';
// allowSyntheticDefaultImports: false
import * as React from 'react';

在下面的示例中，对于没有默认导出的模块 react，如果设置了 allowSyntheticDefaultImports 为 true，则能够间接通过 import 导入 react；但如果设置 allowSyntheticDefaultImports 为 false，则须要通过 import * as 导入 react。

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

在默认状况下，TypeScript 像 ES6 模块一样看待 CommonJS / AMD / UMD，然而此时的 TypeScript 代码转移会导致不合乎 ES6 模块标准。不过，开启 esModuleInterop 后，这些问题都将失去修复。

个别状况下，在启用 esModuleInterop 时，咱们将同时启用 allowSyntheticDefaultImports。

为了反对丰盛的调试工具，并为开发人员提供有意义的解体报告，TypeScript 反对生成合乎 JavaScript Source Map 规范的附加文件（即 .map 文件）。

sourceRoot 用来指定调试器须要定位的 TypeScript 文件地位，而不是绝对于源文件的门路。

sourceRoot 的取值能够是门路或者 URL。

mapRoot 用来指定调试器须要定位的 source map 文件的地位，而不是生成的文件地位。

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

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

TypeScript 反对一些尚未在 JavaScript 提案中稳固的语言个性，因而在 TypeScript 中试验选项是作为试验个性存在的。

experimentalDecorators 选项会开启装璜器提案的个性。

目前，装璜器提案在 stage 2 仍未齐全批准到 JavaScript 标准中，且 TypeScript 实现的装璜器版本可能和 JavaScript 有所不同。

emitDecoratorMetadata 选项容许装璜器应用反射数据的个性。

开启 skipLibCheck 选项，示意能够跳过查看申明文件。

如果咱们开启了这个选项，则能够节俭编译期的工夫，但可能会就义类型零碎的准确性。在设置该选项时，我推荐值为 true。

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

开启此选项后，如果开发人员正在应用和零碎不统一的大小写规定，则会抛出谬误。

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

如果 glob 匹配的文件中没有蕴含文件的扩展名，则只有 files 反对的扩展名会被蕴含。

一般来说，include 的默认值为.ts、.tsx 和 .d.ts。如果咱们开启了 allowJs 选项，还包含 .js 和 .jsx 文件。

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

须要留神：exclude配置项只会扭转 include 配置项中的后果。

files
files 选项用来指定 TypeScript 我的项目中须要蕴含的文件列表。

如果我的项目十分小，那么咱们能够应用 files指定我的项目的文件，否则更适宜应用 include 指定我的项目文件。

extends
extends 配置项的值是一个字符串，用来申明以后配置须要继承的另外一个配置的门路，这个门路应用 Node.js 格调的解析模式。TypeScript 首先会加载 extends 的配置文件，而后应用以后的 tsconfig.json 文件里的配置笼罩继承的文件里的配置。

TypeScript 会基于以后 tsconfig.json 配置文件的门路解析所继承的配置文件中呈现的相对路径。

tsconfig.json 是 TypeScript 我的项目十分重要的配置文件，这里简略总结了编译选项中不同性能的罕用选项，更多的 TypeScript 配置能够在 TSConfig Reference 中查看学习。

关于typescript:tsconfigjson-配置如何定制-TypeScript-的行为

compilerOptions

target

module

jsx

incremental

declaration

sourceMap

lib

严格模式

strict

额定查看

模块解析

moduleResolution

baseUrl

paths

rootDirs

typeRoots

types

allowSyntheticDefaultImports

esModuleInterop

Source Maps

sourceRoot

mapRoot

inlineSourceMap

inlineSources

试验选项

experimentalDecorators

emitDecoratorMetadata

高级选项

skipLibCheck

forceConsistentCasingInFileNames

include

exclude

小结

Just My Socks（注册教程内含优惠码）

关于typescript:tsconfigjson-配置如何定制-TypeScript-的行为

compilerOptions

target

module

jsx

incremental

declaration

sourceMap

lib

严格模式

strict

额定查看

模块解析

moduleResolution

baseUrl

paths

rootDirs

typeRoots

types

allowSyntheticDefaultImports

esModuleInterop

Source Maps

sourceRoot

mapRoot

inlineSourceMap

inlineSources

试验选项

experimentalDecorators

emitDecoratorMetadata

高级选项

skipLibCheck

forceConsistentCasingInFileNames

include

exclude

小结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）