tsconfig.json参数详解

这篇具有很好参考价值的文章主要介绍了tsconfig.json参数详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

tsconfig.json是ts编译器的配置文件,ts编译器可以根据他的信息来对代码进行编译。 

想要学习这篇文章小伙伴,可以先去看看下面文章,可以明白tsconfig.json的由来以及如何编译:

在vscode中使用Typescript并运行_typescript vscode插件_suoh's Blog的博客-CSDN博客

下面开始讲解常用的配置项: 

include 和 exclude

 先学两个比较实用的两个配置项,最常用的还是include

{
  /**
    "include" 用来指定哪些ts文件需要被编译
      路径:**表示任意目录
            * 表示任意文件
  */
  "include": [
    "./src/**/*" //代表编译包含src目录下的任意目录的任意文件,其余的不编译
  ],
  /**
    "exclude" 用来排除哪些ts文件需要被编译
      默认值:[“node modues”、“bower_components”和Sspm_packages”]
  */
  // exclude该选项一般不设置,用不到
  "exclude": [
    "./test/**/*" //不编译test下的所有文件
  ]
}

 compilerOptions

compilerOptions是编译器的选项,比较复杂的配置选项,里面包含若干个子项,下面依次讲解各个子项的作用。

target

  • target 用来指定ts被编译为ES的版本,默认是ES3
  • 可以是 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017','es2018','es2019','es2020','esnext'.

module

  • 指定要使用的模块化的规范 例如 "module": "es2015",或者 "module": "CommonJS",
  • 可以是 "none', 'commonjs', 'amd', 'system', 'uma, 'es6', 'es2015', 'es2020', 'esnext'.

当定义"module": "es2015" 时(推荐): 

来演示一下module的作用,我们先定义一个test.ts文件,

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

然后再indes.ts中引入这个模块,可以看到编译为js的时候是es6的模块化标准方法 

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 那么module也可以采用commonjs,那么编译过来的语法就是commonjs的语法了

当定义"module": "commonjs" 时:

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

lib

  •    用来指定项目中要使用的库,例如document上的方法就属于一个dom库,一般不定义该属性,默认即可

outDir

  • 用来指定编译后的文件所在的目录

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 此时就可以看到,我们编译之后的文件都会存在在js目录下

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

outFile 

  • 将代码合并为一个文件
  • 设置outFile后,所有的全局作用域中的代码会合并到同一个文件中
  • "outFile": "./js/index.js",就代表将所有的js目录下的js文件都合并到index.js里面tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

  • 用的比较少,了解即可

可以看到确实是合并了 

 tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 allowJs

  • 是否对js文件进行编译,默认是false

比如我们目录下有个test.js此时设置allowJs为false的时候,它是不会被编译的

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 checkJs

  • 是否检查js代码是否符合语法规范,默认是false

removeComments

  • 是否移除注释,默认false

设置为false的时候,注释是同样编译过来的 

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 当设置为true,编译后就不会有注释,可以看到注释就消失了

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 noEmit

  • 不生成编译后的js文件,默认就是false

noEmitOnError

  • 当有错误时不生成编译文件 

下面是关于代码类型检查的相关属性设置,首先我们应该都知道在严格模式下进行代码开发要比普通模式性能要好,那在js文件中开启严格模式只需要在开头添加 ‘use strict’ 即可

 tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

那么ts中如何开启呢?

alwaysStrict 

  • 用来设置编译后的文件是否使用严格模式,默认false

noImplicitAny

  • 不允许隐式的any类型,默认false

我们定义一个函数设置两个隐式类型参数,此时也不会报错

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 当设置为true的时候就会报错了。

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 加上类型就好了:

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 noImplicitThis

  • 不允许不明确类型的this,默认为false

当设置为true时就会报错

tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

此时就需要我们手动去设置this的指向 

 tsconfig.json配置详解,❤️❤️--TypeScript,vscode,前端,typescript

 strictNullChecks

  • 严格的检查空值,可以提示一些不确定是否是空值的逻辑,方便我们对空值做判断

strict

  • 所有严格检查的总开关,为true时相当于开启了所有严格检查,false则关闭所有

今天讲解的常用的tsconfig.json设置全代码如下:文章来源地址https://www.toymoban.com/news/detail-833047.html

{
	// compilerOptions编译器的选项
	"compilerOptions": {
		// target 用来指定ts被编译为ES的版本,默认是ES3 
		// 可以是 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017','es2018','es2019','es2020','esnext'.
		"target": "ES6",
		// module 指定要使用的模块化的规范
		"module": "CommonJS",
		// outDir 用来指定编译后文件所在的目录
		"outDir": "./js",
		// 将代码合并为一个文件
		// "outFile": "./js/index.js",
		// 是否对js文件进行编译,默认是false
		"allowJs": false,
		// 是否检查js代码是否符合语法规范,默认是false
		"checkJs": false,
		// 是否移除注释
		"removeComments": true,
		// 不生成编译后的文件
		"noEmit": false,
		// 当有错误时不生成编译文件
		"noEmitOnError": false,
		// 所有严格检查的总开关
		"strict": false,
		// 用来设置编译后的文件是否使用严格模式,默认false
		"alwaysStrict": false,
		// 不允许隐式的any类型
		"noImplicitAny": true,
		// 不允许不明确类型的this
		"noImplicitThis": false,
		// 严格的检查空值
		"strictNullChecks": false,

	},
	/**
	  "include" 用来指定哪些ts文件需要被编译
	    路径:**表示任意目录
	          * 表示任意文件
	*/
	"include": [
		"./**/*" //代表编译包含src目录下的任意目录的任意文件,其余的不编译
	],
	/**
	  "exclude" 用来排除哪些ts文件需要被编译
	    默认值:[“node modues”、“bower_components”和Sspm_packages”]
	*/
	// exclude该选项一般不设置,用不到
	"exclude": [
		"./test/**/*" //不编译test下的所有文件
	]
}

到了这里,关于tsconfig.json参数详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+vite项目中tsconfig.json / tsconfig.node.json 配置

    tsconfig.node.json tsconfig.json

    2024年02月13日
    浏览(34)
  • 解决vscode中导入的vue项目tsconfig.json文件首行标红问题

    vscode中导入的vue项目 tsconfig.json文件标红,文件中第一行 { 处标红 项目中自定义的tsconfig.json文件与vscode本身会自动进行 JavaScript 的语义检查发生冲突,而tsconfig.json文件无法覆盖vscode本身的javascript检查,故标红 让项目自定义的tsconfig.json文件覆盖vscode自带的javascript语义检查

    2024年01月19日
    浏览(34)
  • 【制作npm包3】了解 tsconfig.json 相关配置

    本文是系列文章, 作者一个橙子pro,本系列文章大纲如下。转载或者商业修改必须注明文章出处 一、申请npm账号、个人包和组织包区别 二、了解 package.json 相关配置 三、 了解 tsconfig.json 相关配置 四、 api-extractor 学习 五、 npm 包制作完整教程,我的第一个npm包 在最早的 ty

    2024年02月12日
    浏览(35)
  • vscode中vue3+ts报类型“{ }“上不存在属性“ “,以及ts.config.app.json和tsconfig.node.json中报错(彻底解决)

    亲爱的小伙伴们,你们是否遇到过使用vscode打开vue3+ts项目时一片爆红,一直提示类型\\\"{}\\\"上不存在属性 \\\"\\\",以及ts.config.app.json和tsconfig.node.json中报“在没有\\\"node\\\"模块解析策略的情况下,无法指定选项\\\"-resolveJsonModule”的问题,不要担心,不要着急,看了很多篇的博客,我终于是

    2024年02月13日
    浏览(23)
  • vue项目的Husky、env、editorconfig、eslintrc、tsconfig.json配置文件小聊

    1、 Husky Husky 是一款管理 git hooks 的工具,可以帮助我们触发 git 提交的各个阶段: pre-commit、commit-msg、pre-push , 有助于我们在项目开发中的git规范和团队协作。 .husky 文件通常包含以下内容: pre-commit :在提交代码前运行的脚本,可以用于代码格式化、代码检查等操作; pr

    2024年04月28日
    浏览(22)
  • vscode中setting.json配置详解

    vscode中的setting.json配置文件配置详解 话不多说上配置文件 大家按需复制到自己的setting.json配置文件中即可

    2024年02月16日
    浏览(65)
  • Cannot find base config file @vue/tsconfig/tsconfig.web.json

    vue升级到最新版本,node18 会出现warning 参考issues Cannot find base config file @vue/tsconfig/tsconfig.web.json

    2024年02月12日
    浏览(32)
  • TypeScript教程(一)在vscode中的配置TypeScript环境

    未来的开发者们请上座,随着时代的发展web网页的发展越来越丰富,掌握TypeScript显得更加有必要。 安装Node.js:首先,确保您已经安装了Node.js。您可以从Node.js官方网站(https://nodejs.org)下载并安装适合您操作系统的版本。 npm 切换淘宝镜像源 查询镜像使用状态 npm 安装TypeS

    2024年01月24日
    浏览(41)
  • 详解如何使用VSCode搭建TypeScript环境(适合小白)

    因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境,可以参考文章: 详解如何使用VS code搭建JavaScript环境(适合小白)_vscode配置javascript环境-CSDN博客 执行下面命令进行安装 npm install -g typescript 安装完成后我们就

    2024年02月04日
    浏览(48)
  • 新增:前端提示“请求JSON参数格式不正确,请检查参数格式

    解决方法: 1.检查后端控制台报错: 参数格式传递异常,请求号为:3b44424d-73bd-4db7-970b-38638451c439,具体信息为:JSON parse error: Cannot deserialize value of type ` java.lang.Long` from String \\\" 新增的字段 \\\": not a valid Long value; nested exception is com.fasterxml.jackson.databind.exc.InvalidFormatException: Cannot

    2024年02月17日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包