13 TypeScript 类的 Getter、Setter 和 static 使用

之前学了类的访问类型private,那这个东西如何使用?其实他的最大用处是封装一个属性,然后通过GetterSetter的形式来访问和修改这个属性。

13.1 类的 Getter 和 Setter

13.1.1 Getter

声明一个XiaoJieJie(小姐姐)类,小姐姐的年龄是不能随便告诉人,使用private,这样别人就都不知道她的真实年龄,而只有她自己知道。
如果别人想知道,就必须通过getter属性知道,注意我这里用的是属性,对他就是一个属性。getter属性的关键字是get,后边跟着类似方法的东西,但是你要注意,它并不是方法,归根到底还是属性。
玄妙就在于getter里,我们可以对_age进行处理,比如别人问的时候我们就偷摸的减少 10 岁。

13.1.2 Setter

\_age是私有的,那类的外部就没办法改变,所以这时候可以用setter属性进行改变

13.2 类中的 static

我们先写一下最常规的写法:
但是现在你不想new出对象,而直接使用这个方法,那TypeScript为你提供了快捷的方式,用static声明的属性和方法,不需要进行声明对象,就可以直接使用
需要注意的是,用static声明的属性和方法,才不需要进行声明对象

14 类的只读属性和抽象类

抽象类很父类很像,都需要继承,但是抽象类里一般都有抽象方法。继承抽象类的类必须实现抽象方法才可以。在讲抽象类之前,还需要讲一下类里的只读属性readonly

14.1 类里的只读属性readonly

新建一个文件Demo14.ts,然后写下面一个类,并进行实例化和赋值操作,代码如下:
写完后我们可以在终端(Terminal)中看一下结果,结果就应该是wibus
比如我现在有一个需求,就是在实例化对象时赋予的名字,以后不能再更改了,也就是我们常说的只读属性。我们先来看现在这种情况是可以随意更改的,比如我写下面的代码。
这时候就可以用一个关键词readonly,也就是只读的意思,来修改Person类代码。
这样写完后,VSCode就回直接给我们报错,告诉我们_name属性是只读属性,不能修改

14.2 抽象类的使用

什么是抽象类?举个例子,比如我开了一个洗浴中心,里边有服务员,有初级技师,高级技师,每一个岗位我都写成一个类,那代码就是这样的:
我作为老板,我要求无论是什么职位,都要有独特的技能,比如服务员就是给顾客倒水,初级技师要求会泰式按摩,高级技师要求会 SPA 全身按摩。这是一个硬性要求,但是每个职位的技能有不同,这时候就可以用抽象类来解决问题。
抽象类的关键词是abstract,里边的抽象方法也是abstract开头的,现在我们就写一个Girl的抽象类。
有了这个抽象类,三个类就可以继承这个类,然后会要求必须实现skill()方法,代码如下:
通过这个例子,你也许能对抽象类和抽象方法有一个比较深的认识。其实在实际生产中我们也会把这样的需求用接口interface来实现。

15 配置文件 —— tsconfig.json

应该有些人会看见一些ts项目里面都有一个tsconfig.json这个文件,那这里说下:这个是 TypeScript 的文件,虽然不常用,但是很重要。有必要详细的讲一下这个文件der~

15.1 生成tsconfig.json

这个文件是通过tsc --init命令生成的,在桌面上新建一个文件夹TsDemo,然后打开VSCode,把文件托到编辑器中,然后打开终端Terminal,输入tsc --init
输入完成后,就会出现tsconfig.json文件,你可以打开简单的看一下,不过此时你可能看不懂。
其实它就是用来配置如何对ts文件进行编译的,我们都叫它 typescript 的编译配置文件。
如果此时你的tsc执行不了,很有可能是你没有全局安装 TypeScript,可以全局安装一下。
我在第一篇讲述过安装ts的:

15.2 让 tsconfig.json 文件生效

你现在可以在文件夹跟目录建立一个demo.ts文件,然后编写一些最简单的代码,代码如下:
这时候我们不在使用ts-node直接执行了,需要用tsc demo.ts进行编译,编译后会得到demo.js文件。 生成的代码如下:
这时候好像一切都是正常的,但是我要告诉你的真相是tsconfig.json这个编译配置文件并没有生效。
此时我们打开tsconfig.json文件,找到complilerOptions属性下的removeComments:true选项,把注释去掉。
这个配置项的意思是,编译时不显示注释,也就是编译出来的js文件不显示注释内容。
现在你在文件中加入一些注释,比如:
这时候再运行编译代码tsc demo.ts,编译后打开demo.js文件,你会发现注释依然存在,说明tsconfig.json文件没有起作用。
如果要想编译配置文件起作用,我们可以直接运行tsc命令,这时候tsconfig.json才起作用,可以看到生成的js文件已经不带注释了。
那现在又出现问题了,如果我们的跟目录下有多个ts文件,我们却只想编译其中的一个文件时,如何作?
我们在项目根目录,新建一个文件demo2.ts文件,然后也写一段最简单的 ts 代码。
如果这时候我们在终端里运行tsc,虽然tsconfig.json生效了,但是两个文件都被我们编译了。这不是你想要的结果,我们可以用三种办法解决这个问题。
  1. 第一种:使用 include 配置
include属性是用来指定要编译的文件的,比如现在我们只编译demo.ts文件,而不编译demo2.ts文件,就可以这样写。
写配置文件时有个坑需要注意,就是配置文件不支持单引号,所以里边都要使用双引号。
这时候再编译,就只编译demo.ts文件了。
  1. 第二种:使用 exclude 配置
include是包含的意思,exclude是不包含,除什么文件之外,意思是写再这个属性之外的而文件才进行编译。比如你还是要编译demo.ts文件,这时候的写法就应该是这样了。
这样写依然只有demo.ts被编译成了js文件。
  1. 第三种:使用 files 配置
files的配置效果和include几乎一样,我是没找出有什么不同,只要配置到里边的文件都可以编译,如果有小伙伴知道有什么不同的,欢迎在视频下方留言,然后一起学习。
结果是依然只有demo.ts文件被编译。这节课我们就学到这里,目的只是让大家初步了解一下tsconfig.js文件和它的使用方法,文件里边还有很多配置项,这些我们都会逐步讲到。

亲亲留个评论再走呗

正在加载评论区...