14. TypeScript 配置文件-初识 tsconfig.json

tsconfig.json是做什么的,这个是 TypeScript 的文件,虽然不常用,但是很重要。有必要拿出几节详细的讲一下这个文件。

生成 tsconfig.json 文件

这个文件是通过tsc --init命令生成的,在桌面上新建一个文件夹TsDemo,然后打开VSCode,把文件托到编辑器中,然后打开终端Terminal,输入tsc --init

输入完成后,就会出现tsconfig.json文件,你可以打开简单的看一下,不过此时你可能看不懂。

其实它就是用来配置如何对ts文件进行编译的,我们都叫它 typescript 的编译配置文件。

如果此时你的tsc执行不了,很有可能是你没有全局安装 TypeScript,可以全局安装一下。

让 tsconfig.json 文件生效

你现在可以在文件夹跟目录建立一个demo.ts文件,然后编写一些最简单的代码,代码如下:

const person: string = "mybj";

这时候我们不在使用ts-node直接执行了,需要用tsc demo.ts进行编译,编译后会得到demo.js文件。 生成的代码如下:

var person = "mybj";

这时候好像一切都是正常的,但是我要告诉你的真相是tsconfig.json这个编译配置文件并没有生效。

此时我们打开tsconfig.json文件,找到complilerOptions属性下的removeComments:true选项,把注释去掉。

这个配置项的意思是,编译时不显示注释,也就是编译出来的js文件不显示注释内容。

现在你在文件中加入一些注释,比如:

// I love mybj
const person: string = "mybj";

这时候再运行编译代码tsc demo.ts,编译后打开demo.js文件,你会发现注释依然存在,说明tsconfig.json文件没有起作用。

如果要想编译配置文件起作用,我们可以直接运行tsc命令,这时候tsconfig.json才起作用,可以看到生成的js文件已经不带注释了。

include 、exclude 和 files

那现在又出现问题了,如果我们的根目录下有多个ts文件,我们却只想编译其中的一个文件时,如何实现呢?

我们在项目根目录,新建一个文件demo2.ts文件,然后也写一段最简单的 ts 代码。

const person2: string = "mybj123.com";

如果这时候我们在终端里运行tsc,虽然tsconfig.json生效了,但是两个文件都被我们编译了。这不是你想要的结果,我们可以用三种办法解决这个问题。

第一种:使用 include 配置

include属性是用来指定要编译的文件的,比如现在我们只编译demo.ts文件,而不编译demo2.ts文件,就可以这样写。

写配置文件时有个坑需要注意,就是配置文件不支持单引号,所以里边都要使用双引号。

{
  "include":["demo.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

这时候再编译,就只编译demo.ts文件了。

第二种:使用 exclude 配置

include是包含的意思,exclude是不包含,除什么文件之外,意思是写再这个属性之外的而文件才进行编译。比如你还是要编译demo.ts文件,这时候的写法就应该是这样了。

{
  "exclude":["demo2.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

这样写依然只有demo.ts被编译成了js文件。

第三种:使用 files 配置

files的配置效果和include几乎一样,我是没找出有什么不同,只要配置到里边的文件都可以编译,如果有小伙伴知道有什么不同的,欢迎在视频下方留言,然后一起学习。

{
  "files":["demo.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

结果是依然只有demo.ts文件被编译。这节我们就学到这里,目的只是让大家初步了解一下tsconfig.js文件和它的使用方法,文件里边还有很多配置项,这些我们都会逐步讲到。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 14. TypeScript 配置文件-初识 tsconfig.json

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们