生成 tsconfig.json 文件
这个文件是通过
tsc --init
命令生成的,在桌面上新建一个文件夹
TsDemo
,然后打开
VSCode
,把文件托到编辑器中,然后打开终端
Terminal
,输入
tsc --init
。
输入完成后,就会出现
tsconfig.json
文件
其实它就是用来配置如何对
ts
文件进行编译的,我们都叫它 typescript 的编译配置文件。
前提是全局安装了Ts
让 tsconfig.json 文件生效
你现在可以在文件夹跟目录建立一个demo.ts文件,然后编写一些最简单的代码,代码如下:
const person: string = "jspang";
这时候我们不在使用ts-node
直接执行了,需要用tsc demo.ts
进行编译,编译后会得到
var person = "jspang";
这时候好像一切都是正常的,但是我要告诉你的真相是tsconfig.json
这个编译配置文件并没有生效。
此时我们打开tsconfig.json
文件,找到complilerOptions
属性下的removeComments:true
选项,把注释去掉。
这个配置项的意思是,编译时不显示注释,也就是编译出来的js文件不显示注释内容。
现在你在文件中加入一些注释,比如:
// I love jspang
const person: string = "jspang";
这时候再运行编译代码tsc demo.ts
,编译后打开demo.js
文件,你会发现注释依然存在,说明tsconfig.json
文件没有起作用。
如果要想编译配置文件起作用,我们可以直接运行tsc
命令,这时候tsconfig.json
才起作用,可以看到生成的js文件已经不带注释了。
include 、exclude 和 files
那现在又出现问题了,如果我们的跟目录下有多个ts
文件,我们却只想编译其中的一个文件时,如何作?
使用 include 配置
include
属性是用来指定要编译的文件的,比如现在我们只编译demo.ts
文件,而不编译demo2.ts
文件,就可以这样写。
"include":["demo.ts"],
"compilerOptions": {
//any something
//........
第二种:使用 exclude 配置
include
是包含的意思,exclude
是不包含,除什么文件之外,意思是写再这个属性之外的而文件才进行编译。比如你还是要编译demo.ts
文件,这时候的写法就应该是这样了。
"exclude":["demo2.ts"],
"compilerOptions": {
//any something
//........
第三种:使用 files 配置
files
的配置效果和include
几乎一样,我是没找出有什么不同,只要配置到里边的文件都可以编译,如果有小伙伴知道有什么不同的,欢迎在视频下方留言,然后一起学习。
"files":["demo.ts"],
"compilerOptions": {
//any something
//........
结果是依然只有demo.ts
文件被编译。这节课我们就学到这里,目的只是让大家初步了解一下tsconfig.js
文件和它的使用方法,文件里边还有很多配置项,这些我们都会逐步讲到。
配置文件- compilerOptions 配置内容详解
removeComments 属性
removeComments
是complerOptions
里的一个子属性,它的用处是告诉TypeScript对编译出来的js文件是否显示注释(注解)。比如我们现在把removeComments
的值设置为true
,就是在js
中不显示注释。
strict 属性
strict
属性如果设置为true
,就代表我们的编译和书写规范,要按照TypeScript最严格的规范来写,如果我们把这个设置为false或者注释掉,意思是我们可以对设置一些不严格的写法。
noImplicitAny 属性
noImplicitAny
属性的作用是,允许你的注解类型 any
不用特意表明,只听概念很难理解。这就是看我视频的一个好处,如果你只看官方 API
,你可能要迷糊一阵啥叫允许你的注解类型any
不用特意表明,这就是每个汉字我都认识,连在一期就不知道啥意思的最好诠释。
为了更好的说明,我们举个例子,在demo.ts
里,删除刚才的代码,然后写一个方法,方法的参数我们设置成任意类型(any)
。
function jspang(name) {
return name;
这时候我们的TypeScript是进行报错的,我们用tsc
编译也是报错的。这就是因为我们开启了strict:true
,我们先注释掉,然后把noImplicitAny
的值设置为false
,就不再报错了。
function jspang(name: any) {
return name;
strictNullChecks 属性
我们先把strictNullChecks
设置为false
,它的意思就是,不强制检查 NULL
类型。我们举个例子,让你能一下子就明白,还是删除demo.ts
里的代码,然后编写代码.
const jspang: string = null;
代码写完后,你会发现这段代码是不报错的,如果是以前,一定是报错的,这就是我们配置了“不强制检验 null
类型”。如果你设成strictNullChecks:true
,这时候就报错了。