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 设置的,接着就来看一看。

属性名值类型默认值描述
allowJsbooleanfalse编译时,允许有 js 文件
allowSyntheticDefaultImportsbooleanmodule === "system"允许引入没有默认导出的模块
allowUnreachableCodebooleanfalse允许覆盖不到的代码
allowUnusedLabelsbooleanfalse允许未使用的标签
alwaysStrictbooleanfalse严格模式,为每个文件添加 "use strict"
baseUrlstring 与 path 一同定义模块查找的路径,详细参考这里
charsetstring"utf8"输入文件的编码类型
checkJsbooleanfalse验证 js 文件,与 allowJs 一同使用
declarationbooleanfalse生成 .d.ts 定义文件
declarationDirstring 生成定义文件的存放文件夹(2.0 以上)
diagnosticsbooleanfalse是否显示诊断信息
downlevelIterationbooleanfalse当 target 为 ES5 或 ES3 时,提供对 for..of,解构等的支持
emitBOMbooleanfalse在输出文件头添加 utf-8 (BOM)字节标记
emitDecoratorMetadatabooleanfalse详见 issue
experimentalDecoratorsbooleanfalse允许注解语法
forceConsistentCasingInFileNamesbooleanfalse不允许不同变量来代表同一文件
importHelpers booleanfalse引入帮助(2.1 以上)
inlineSourceMapbooleanfalse将 source map 一同生成到输出文件中
inlineSourcesbooleanfalse将 ts 源码生成到 source map 中,需要同时设置 inlineSourceMap 或 sourceMap
isolatedModulesbooleanfalse将每个文件作为单独的模块
jsxstring"preserve"jsx 的编译方式
jsxFactorystring"React.createElement"定义 jsx 工厂方法,React.createElement 还是 h(2.1 以上)
libstring[] 引入库定义文件,可以是["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 以上)
listEmittedFilesbooleanfalse显示输入文件名
listFilesbooleanfalse显示编译输出文件名
localestring随系统错误信息的语言
mapRootstring 定义 source map 的存放位置
maxNodeModuleJsDepthnumber0检查引入 js 模块的深度,需同 allowJs 一同使用
modulestring 指定模块生成方式,["commonjs", "amd", "umd", "system", "es6", "es2015", "esnext", "none"]
moduleResolutionstring 指定模块解析方式,["classic" : "node"]
newLinestring随系统行位换行符,"crlf" (windows) 或 "lf" (unix)
noEmitbooleanfalse不显示输出
noEmitHelpersbooleanfalse不在输出文件中生成帮助
noEmitOnErrorbooleanfalse出错后,不输出文件
noFallthroughCasesInSwitchbooleanfalseswitch 语句中,每个 case 都要有 break
noImplicitAnybooleanfalse不允许隐式 any,如果true,函数的形参必须带类型,如果叫不出class名的js对象,那就得any,比如(d:any)=>{}
如果false,函数的样子更像js  (d)=>{}
noImplicitReturnsbooleanfalse函数所有路径都必须有显示 return
noImplicitThisbooleanfalse不允许 this 为隐式 any
noImplicitUseStrictbooleanfalse输出中不添加 "use strict"
noLibbooleanfalse不引入默认库文件
noResolvebooleanfalse不编译三斜杠或模块引入的文件
noUnusedLocalsbooleanfalse未使用的本地变量将报错(2.0 以上)
noUnusedParametersbooleanfalse未使用的参数将报错(2.0 以上)
outDirstring 定义输出文件的文件夹
outFilestring 合并输出到一个文件
pathsobject 与 baseUrl 一同定义模块查找的路径,详细参考这里
preserveConstEnumsbooleanfalse不去除枚举声明
prettybooleanfalse美化错误信息
reactNamespacestring"React"废弃。改用jsxFactory
removeCommentsbooleanfalse去除注释
rootDirstring当前目录定义输入文件根目录
rootDirsstring [] 定义输入文件根目录
skipDefaultLibCheckbooleanfalse废弃。改用 skipLibCheck
skipLibCheckbooleanfalse对库定义文件跳过类型检查(2.0 以上)
sourceMapbooleanfalse生成对应的 map 文件
sourceRootstring 调试时源码位置
strictbooleanfalse同时开启 alwaysStrictnoImplicitAnynoImplicitThis 和 strictNullChecks (2.3 以上)
strictNullChecksbooleanfalsenull 检查(2.0 以上)
stripInternalbooleanfalse不输出 JSDoc 注解
suppressExcessPropertyErrorsbooleanfalse不提示对象外属性错误
suppressImplicitAnyIndexErrorsbooleanfalse不提示对象索引隐式 any 的错误
targetstring"es3"输出代码 ES 版本,可以是 ["es3", "es5", "es2015", "es2016", "es2017", "esnext"]
traceResolutionbooleanfalse跟踪模块查找信息
typeRootsstring [] 定义文件的文件夹位置(2.0 以上)
typesstring [] 设置引入的定义文件(2.0 以上)
watchbooleanfalse监听文件变更

一般情况下,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://www.cnblogs.com/cczlovexw/p/11527708.html

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值