tsconfig.json配置说明

Posted 2020-11-13 前端开发-阿锋

配置 tsconfig.json

tsconfig.json 所包含的属性并不多，只有 7 个，ms 官方也给出了它的定义文件。但看起来并不怎么舒服，这里就翻译整理一下。（若有误，还请指出）

• files: 数组类型，用于表示由 ts 管理的文件的具体文件路径
• exclude: 数组类型，用于表示 ts 排除的文件（2.0 以上支持 Glob）
• include: 数组类型，用于表示 ts 管理的文件（2.0 以上）
• compileOnSave: 布尔类型，用于 IDE 保存时是否生成编译后的文件
• extends: 字符串类型，用于继承 ts 配置，2.1 版本后支持
• compilerOptions: 对象类型，设置编译的选项，不设置则使用默认配置，配置项比较多，后面再列
• typeAcquisition: 对象类型，设置自动引入库类型定义文件(.d.ts)相关，该对象下面有 3 个子属性分别是：
  • enable: 布尔类型，是否开启自动引入库类型定义文件(.d.ts)，默认为 false
  • include: 数组类型，允许自动引入的库名，如：["jquery", "lodash"]
  • exculde: 数组类型，排除的库名

如不设定 files 和 include，ts 默认是 exclude 以外的所有的以 .ts 和 .tsx 结尾的文件。如果，同时设置 files 的优先级最高，exclude 次之，include 最低。

上面都是文件相关的，编译相关的都是靠 compilerOptions 设置的，接着就来看一看。

属性名	值类型	默认值	描述
allowJs	boolean	false	编译时，允许有 js 文件
allowSyntheticDefaultImports	boolean	module === "system"	允许引入没有默认导出的模块
allowUnreachableCode	boolean	false	允许覆盖不到的代码
allowUnusedLabels	boolean	false	允许未使用的标签
alwaysStrict	boolean	false	严格模式，为每个文件添加 "use strict"
baseUrl	string		与 path 一同定义模块查找的路径，详细参考这里
charset	string	"utf8"	输入文件的编码类型
checkJs	boolean	false	验证 js 文件，与 allowJs 一同使用
declaration	boolean	false	生成 .d.ts 定义文件
declarationDir	string		生成定义文件的存放文件夹（2.0 以上）
diagnostics	boolean	false	是否显示诊断信息
downlevelIteration	boolean	false	当 target 为 ES5 或 ES3 时，提供对 for..of，解构等的支持
emitBOM	boolean	false	在输出文件头添加 utf-8 (BOM)字节标记
emitDecoratorMetadata	boolean	false	详见 issue
experimentalDecorators	boolean	false	允许注解语法
forceConsistentCasingInFileNames	boolean	false	不允许不同变量来代表同一文件
importHelpers		boolean	false	引入帮助（2.1 以上）
inlineSourceMap	boolean	false	将 source map 一同生成到输出文件中
inlineSources	boolean	false	将 ts 源码生成到 source map 中，需要同时设置 inlineSourceMap 或 sourceMap
isolatedModules	boolean	false	将每个文件作为单独的模块
jsx	string	"preserve"	jsx 的编译方式
jsxFactory	string	"React.createElement"	定义 jsx 工厂方法，React.createElement 还是 h（2.1 以上）
lib	string[]		引入库定义文件，可以是["es5", "es6", "es2015", "es7", "es2016", "es2017", "esnext", "dom", "dom.iterable", "webworker", "scripthost", "es2015.core", "es2015.collection", "es2015.generator", "es2015.iterable", "es2015.promise", "es2015.proxy", "es2015.reflect", "es2015.symbol", "es2015.symbol.wellknown", "es2016.array.include", "es2017.object", "es2017.sharedmemory", "esnext.asynciterable"]（2.0 以上）
listEmittedFiles	boolean	false	显示输入文件名
listFiles	boolean	false	显示编译输出文件名
locale	string	随系统	错误信息的语言
mapRoot	string		定义 source map 的存放位置
maxNodeModuleJsDepth	number	0	检查引入 js 模块的深度，需同 allowJs 一同使用
module	string		指定模块生成方式，["commonjs", "amd", "umd", "system", "es6", "es2015", "esnext", "none"]
moduleResolution	string		指定模块解析方式，["classic" : "node"]
newLine	string	随系统	行位换行符，"crlf" (windows) 或 "lf" (unix)
noEmit	boolean	false	不显示输出
noEmitHelpers	boolean	false	不在输出文件中生成帮助
noEmitOnError	boolean	false	出错后，不输出文件
noFallthroughCasesInSwitch	boolean	false	switch 语句中，每个 case 都要有 break
noImplicitAny	boolean	false	不允许隐式 any
noImplicitReturns	boolean	false	函数所有路径都必须有显示 return
noImplicitThis	boolean	false	不允许 this 为隐式 any
noImplicitUseStrict	boolean	false	输出中不添加 "use strict"
noLib	boolean	false	不引入默认库文件
noResolve	boolean	false	不编译三斜杠或模块引入的文件
noUnusedLocals	boolean	false	未使用的本地变量将报错（2.0 以上）
noUnusedParameters	boolean	false	未使用的参数将报错（2.0 以上）
outDir	string		定义输出文件的文件夹
outFile	string		合并输出到一个文件
paths	object		与 baseUrl 一同定义模块查找的路径，详细参考这里
preserveConstEnums	boolean	false	不去除枚举声明
pretty	boolean	false	美化错误信息
reactNamespace	string	"React"	废弃。改用jsxFactory
removeComments	boolean	false	去除注释
rootDir	string	当前目录	定义输入文件根目录
rootDirs	string []		定义输入文件根目录
skipDefaultLibCheck	boolean	false	废弃。改用 skipLibCheck
skipLibCheck	boolean	false	对库定义文件跳过类型检查（2.0 以上）
sourceMap	boolean	false	生成对应的 map 文件
sourceRoot	string		调试时源码位置
strict	boolean	false	同时开启 alwaysStrict, noImplicitAny, noImplicitThis 和 strictNullChecks (2.3 以上)
strictNullChecks	boolean	false	null 检查（2.0 以上）
stripInternal	boolean	false	不输出 JSDoc 注解
suppressExcessPropertyErrors	boolean	false	不提示对象外属性错误
suppressImplicitAnyIndexErrors	boolean	false	不提示对象索引隐式 any 的错误
target	string	"es3"	输出代码 ES 版本，可以是 ["es3", "es5", "es2015", "es2016", "es2017", "esnext"]
traceResolution	boolean	false	跟踪模块查找信息
typeRoots	string []		定义文件的文件夹位置（2.0 以上）
types	string []		设置引入的定义文件（2.0 以上）
watch	boolean	false	监听文件变更

一般情况下，tsconfig.json 文件只需配置 compilerOptions 部分。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true, // 允许引入没有默认导出的模块
    "module": "es2015",
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5",
    "lib": [
      "dom",
      "es5",
      "es2015"
    ]
  }
}

 

其中，allowSyntheticDefaultImports 是使用 vue 必须的，而设置 module 则是让模块交由 webpack 处理，从而可以使用 webpack2 的摇树。另外，加上allowJs，这样就可以一点点将现有的 js 代码转换为 ts 代码了。

如果，你在 webpack 中设置过 resolve -> alias，那么，在 ts config 中也需要通过 baseUrl + path 的方式来定义模块查找的方式。

<a name="tslint"></a>