使用TypeScript编译的时候,有些语法需要tsconfig的配置才能使用。
比如装饰器如果不配置会报这个错Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning
解决在Typescript中报Cannot redeclare block-scoped variable的错误,也需要配置一下tsconfig.json文件的 "lib": ["es2015"]
本文主要介绍两点：
- 运行tsconfig.json
- tsconfig.json的参数配置
运行tsconfig.json
我们通过tsc --init 可以生成tsconfig.json文件,那我们生成的tsconfig.json[1]配置文件怎么运行呢？
- 我们直接输入
tsc或者tsc -p tsconfig.json时,默认会调用tsconfig.json; - 在命令行上指定输入文件时，将忽略
tsconfig.json文件。这样的情况下,只能通过命令输入配置来运行,这也是为什么明明配置了tsconfig.json,但是没有生效。举个例子:$ tsc index3.ts --t es5 --experimentalDecorators
监控ts文件的变化可以使用tsc -w,更多指令在命令行输入tsc --help查看
tsconfig.json的参数配置
tsconfig.json这个文件的参数有很多,有时不知道是什么意思,有什么作用,下一次碰到的时候还是不太会,这里做个表格,用的时候方便查阅。
选项 | 描述 |
|---|---|
incremental | 启动增量编译 |
target | 指定ECMAScript目标版本 "ES3"（默认）， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"或 "ESNext"。 |
module | 指定使用什么模块代码生成："None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"。只有 "AMD"和 "System" --outFile一起使用。"ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。 |
lib | 编译过程中需要引入的库文件的列表。可能的值为：ES5、ES6、ES2015、ES7、ES2016、ES2017、ES2018、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.Intl、ES2017.SharedMemory、ES2017.String、ES2017.TypedArrays、ES2018.Intl、ES2018.Promise、ES2018.RegExp、ESNext.AsyncIterable、ESNext.Array、ESNext.Intl、ESNext.Symbol 注意：如果--lib没有指定默认注入的库的列表。默认注入的库为：针对于--target ES5：DOM，ES5，ScriptHost、针对于--target ES6：DOM，ES6，DOM.Iterable，ScriptHost |
allowJs | 允许编译javascript文件 |
checkJs | 在 .js文件中报告错误 |
jsx | 在 .tsx文件里支持JSX："React","react-native"或 "Preserve" |
declaration | 生成相应的 .d.ts文件 |
declarationMap | 为每个相应的“ .d.ts”文件生成一个sourcemap文件 |
sourceMap | 生成相应的 .map文件 |
outFile | 将输出文件合并为一个文件 |
outDir | 重定向输出目录 |
rootDir | 用来控制输出的目录结构 |
composite | 启用项目编译 |
tsBuildInfoFile | 指定文件去存储增量编译信息 |
removeComments | 删除所有注释，除了以 /!*开头的版权信息 |
noEmit | 不生成输出文件 |
importHelpers | 从 tslib 导入辅助工具函数（比如 __extends， __rest等） |
downlevelIteration | 当针对“ ES5”或“ ES3”时，在“ for-of”，传播和解构中为可迭代项提供全面支持 |
isolatedModules | 将每个文件作为单独的模块（与“ts.transpileModule”类似） |
strict | 启用所有严格类型检查选项 |
noImplicitAny | 在表达式和声明上有隐含的 any类型时报错 |
strictNullChecks | 在严格的 null检查模式下， null和 undefined值不包含在任何类型里，只允许用它们自己和 any来赋值（有个例外， undefined可以赋值到 void） |
strictFunctionTypes | 启动对函数类型的检查 |
strictBindCallApply | 在函数上启动"bind","call"和"apply" |
strictPropertyInitialization | 确保类的非undefined属性已经在构造函数里初始化。若要令此选项生效，需要同时启用--strictNullChecks |
noImplicitThis | 当 this表达式的值为 any类型的时候，生成一个错误 |
alwaysStrict | 以严格模式解析并为每个源文件生成 "use strict"语句 |
noUnusedLocals | 若有未使用的局部变量则抛错 |
noUnusedParameters | 若有未使用的参数则抛错 |
noImplicitReturns | 不是函数的所有返回路径都有返回值时报错 |
noFallthroughCasesInSwitch | 不允许switch的case语句贯穿 |
moduleResolution | 如何解析模块:'node' (Node.js) or 'classic' (TypeScript pre-1.6) |
baseUrl | 解析文档目录 |
paths | 模块名到基于 baseUrl的路径映射的列表 |
rootDirs | 用来控制输出的目录结构 |
typeRoots | 要包含的类型声明文件路径列表 |
types | 要包含的类型声明文件名列表 |
allowSyntheticDefaultImports | 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查 |
esModuleInterop | 通过所有导入创建名称空间对象，启用CommonJS和ES模块之间的相互操作 |
preserveSymlinks | 不把符号链接解析为其真实路径；将符号链接文件视为真正的文件 |
allowUmdGlobalAccess | 允许从模块访问UMD全局变量 |
sourceRoot | 指定TypeScript源文件的路径，以便调试器定位。当TypeScript文件的位置是在运行时指定时使用此标记。路径信息会被加到 sourceMap里 |
mapRoot | 为调试器指定指定sourcemap文件的路径，而不是使用生成时的路径。当 .map文件是在运行时指定的，并不同于 js文件的地址时使用这个标记。指定的路径会嵌入到 sourceMap里告诉调试器到哪里去找它们。 |
inlineSourceMap | 生成单个sourcemaps文件，而不是将每sourcemaps生成不同的文件 |
inlineSources | 将代码与sourcemaps生成到一个文件中，要求同时设置了 --inlineSourceMap或 --sourceMap属性 |
experimentalDecorators | 启动装饰器 |
emitDecoratorMetadata | 给源码里的装饰器声明加上设计类型元数据 |
skipLibCheck | 忽略所有的声明文件（ *.d.ts）的类型检查 |
forceConsistentCasingInFileNames | 禁止对同一个文件使用大小写不一致的引用 |
常用的tsconfig.json配置:
{
"target": "ES2015",
"module": "commonjs",
"sourceMap": true,
"outDir": "./script",
"strict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}参考资料
[1] tsconfig: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
