Typescript的tsconfig.json
使用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
- Javascript数组操作
- Tensorflow官方语音识别入门教程 | 附Google新语音指令数据集
- jQuery VS JavaScript原生API
- 居于H5的多文件、大文件、多线程上传解决方案
- 抛弃websocket,前端直接打通信道,webRTC搭建音视频聊天
- Golang学习-第三篇 认识Web框架
- Golang学习-第二篇 搭建一个简单的Go Web服务器
- 数据说话:Go语言的Switch和Map性能实测
- Dora.Interception, 为.NET Core度身打造的AOP框架[4]:演示几个典型应用
- Dora.Interception, 为.NET Core度身打造的AOP框架[3]:Interceptor的注册
- Dora.Interception, 为.NET Core度身打造的AOP框架:不一样的Interceptor定义方式
- Dora.Interception,为.NET Core度身打造的AOP框架:全新的版本
- ASP.NET Core的路由[4]:来认识一下实现路由的RouterMiddleware中间件
- 浅谈 Java 并发编程中的若干核心技术
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 四、学编程语言前,不了解Git,怎么入坑
- 【设计模式系列(三)】彻底搞懂原型模式
- 分享一个可以装逼的开发技巧
- 各位相加,直到得到一个一位的整数
- BFE.dev前端刷题64 - Promise reject的时候自动retry
- 顺序消息管道《Message Pipe》v1.0.1版本发布
- Qt音视频开发23-通用视频控件
- 破解Mariadb5.5密码
- redis学习(七)
- 自己实现一个SAP WebClient UI Repository Information System
- ABAP,Java和JavaScript类的构造函数使用的一些陷阱
- Spring Security如何优雅的增加OAuth2协议授权模式
- 如何将自定义XML视图注入SAP Fiori Elements应用
- SAP UI5控件ID的生成逻辑原理解析
- 如何自定义SAP Spartacus店铺的界面颜色风格