tsconfig.json 配置文件2
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 | 不允许隐式
如果false,函数的样子更像js (d)=>{}
|
|
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
部分。
其中,allowSyntheticDefaultImports
是使用 vue 必须的,而设置 module
则是让模块交由 webpack 处理,从而可以使用 webpack2 的摇树。另外,加上allowJs
,这样就可以一点点将现有的 js 代码转换为 ts 代码了。
如果,你在 webpack 中设置过 resolve
-> alias
,那么,在 ts config 中也需要通过 baseUrl
+ path
的方式来定义模块查找的方式。
欢迎关注公众号,进一步技术交流: