tsconfig.json配置说明(转载)

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，如果true，函数的形参必须带类型，如果叫不出class名的js对象，那就得any，比如（d:any）=>{}，如果false，函数的样子更像js （d）=>{}</div>| |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>

本文会经常更新，请阅读原文： https://dashenxian.github.io/post/tsconfig.json%E9%85%8D%E7%BD%AE%E8%AF%B4%E6%98%8E ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名小神仙（包含链接： https://dashenxian.github.io ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 (125880321@qq.com) 。