Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Typescript的tsconfig.json

Typescript的tsconfig.json

作者头像
小丑同学
发布于 2020-10-10 03:00:49
发布于 2020-10-10 03:00:49
2.2K00
代码可运行
举报
文章被收录于专栏:小丑的小屋小丑的小屋
运行总次数:0
代码可运行

使用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配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 小丑的小屋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
tsconfig.json配置项备忘
重点配置项是 compilerOptions ,它决定了tsc会如何编译目标文件,生成到什么地方,它的常用配置项如下:
fastmock
2023/12/02
6520
TypeScript——使用npm安装和编译
思索
2024/08/16
1670
TypeScript——使用npm安装和编译
去除typescript代码类型
在短时间内有一个需求,原项目代码是 js,而我手里头的功能代码是 ts 的,需要将其合并。
愧怍
2022/12/27
2.6K0
TypeScript系列教程十二《编译配置》
TypeScript 执行tsc 操作进行编译时根据编译配置来执行的,编译配置可以设计编译属性影响输出结果。
星宇大前端
2022/05/06
1.1K0
一些你需要掌握的 tsconfig.json 常用配置项
tsconfig.json 是用来配置 TS 编译选项的,通常位于项目的根目录位置。
前端西瓜哥
2022/12/21
1.6K0
一些你需要掌握的 tsconfig.json 常用配置项
快速上手Vue开发:在项目中如何配置 tsconfig.json 文件?
compilerOptions:编译器选项列表。 include 和 exclude:指定一个文件glob匹配模式列表。
程序员云帆哥
2023/08/18
1.2K0
typescript[0x01]--基础数据类型
楼上这句话后半部分听不懂没有关系,下面跟ataola一起通过一些具体实例和思考,来一起学习一下typescript吧!
江涛学编程
2020/06/19
5510
TypeScript编译选项
TypeScript编译选项是用于配置TypeScript编译器(tsc)的选项,用于指定编译过程中的行为和输出结果。通过这些选项,我们可以自定义编译器的行为,以满足项目的特定需求。
堕落飞鸟
2023/05/22
6950
了不起的 tsconfig.json 指南
在 TypeScript 开发中,tsconfig.json 是个不可或缺的配置文件,它是我们在 TS 项目中最常见的配置文件,那么你真的了解这个文件吗?它里面都有哪些优秀配置?如何配置一个合理的 tsconfig.json 文件?本文将全面带大家一起详细了解 tsconfig.json 的各项配置。
pingan8787
2020/06/02
2.7K0
【愚公系列】2021年12月 Typescript-基本配置
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,添加了可选的静态类型和面向对象编程。TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。
愚公搬代码
2022/12/01
4020
【愚公系列】2021年12月 Typescript-基本配置
会写 TypeScript 但你真的会 TS 编译配置吗?
随着 TypeScript 的流行,越来越多的项目通过使用 TypeScript 来实现编写代码时候的类型提示和约束,从开发过程中减少 BUG 出现的概率,以此提升程序的健壮性和团队的研发效率。
小东同学
2022/07/29
3.9K1
会写 TypeScript 但你真的会 TS 编译配置吗?
TypeScript学习笔记(三)—— 编译选项、声明文件
compilerOptions ⽀持很多选项,常⻅的有 baseUrl 、 target 、 moduleResolution 和 lib 等。 compilerOptions 每个选项的详细说明如下:
张果
2022/10/04
2.6K0
TypeScript学习笔记(三)—— 编译选项、声明文件
TypeScript 安装与编译
执行上述命令,会在当前目录生成一个 test.js 的文件 同样我们也可以指定输出 js 的目录,如将输出的文件存放到 dist 目录
hedeqiang
2019/12/17
7370
【One by one系列】一步步学习TypeScript
想弯道超车吗!?快速追上前端潮流吗!?那么开始使用ts或许是个选择,当然这有一点急功近利,不提倡。
DDGarfield
2022/06/23
6270
TypeScript 工程化的实践方案
JavaScript代码可以直接被浏览器执行,而TypeScript则需要编译后才能被执行,比如使用tsc命令编译。但这就会显得很麻烦,每次都要运行命令,编译后才能被执行。而且项目里不止写一个TypeScript文件,如果有多个ts文件,我们一个一个去编译那也太麻烦了。所以下面就来学习TypeScript的编译选项和tsconfig.json配置选项。
害恶细君
2022/11/22
8970
TypeScript 工程化的实践方案
tsconfig.json 编译器配置大全
一般来说,项目的 TS 编译器配置全部存储在项目根目录下的 tsconfig.json 文件中
Leophen
2021/07/08
1.2K0
使用typescript开发angular模块(发布npm包)
创建模块 初始化package.json文件 执行命名 npm init -y 会自动生成package.json文件如下,name默认为文件夹名称 { "name": "MZC-Ng-Api", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords"
易兒善
2018/08/21
1.3K0
使用typescript开发angular模块(发布npm包)
《现代Typescript高级教程》解读TSConfig
TypeScript 配置文件(tsconfig.json)是用于配置 TypeScript 项目的重要文件。它允许开发者自定义 TypeScript 编译器的行为,指定编译选项、文件包含与排除规则、输出目录等。通过合理配置 tsconfig.json,我们可以根据项目需求进行灵活的 TypeScript 编译设置。
linwu
2023/07/27
6140
搭建node服务(三):使用TypeScript
当使用tsc命令进行编译时,如果未指定ts文件,编译器会从当前目录开始去查找tsconfig.json文件,并根据tsconfig.json的配置进行编译。
宜信技术学院
2020/07/17
2.9K0
搭建node服务(三):使用TypeScript
跟着Vam一起学习Typescript(第一期)
创建一个项目文件夹,在该文件夹下打开命令行工具,使用code .命令快速打开编辑器(如果计算机提示没有这个命令,请查找到编辑器安装目录bin文件夹下,复制地址。到系统的环境变量下Path,编辑,在前面加上;,粘贴进去就好了)。 3、运行typesript以及同步typesript与js转换
马克社区
2022/06/24
5020
相关推荐
tsconfig.json配置项备忘
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文