一起入手TypeScript(五)
13 TypeScript 类的 Getter、Setter 和 static 使用
之前学了类的访问类型private
,那这个东西如何使用?其实他的最大用处是封装一个属性,然后通过Getter
和Setter
的形式来访问和修改这个属性。
13.1 类的 Getter 和 Setter
13.1.1 Getter
声明一个XiaoJieJie(小姐姐)类,小姐姐的年龄是不能随便告诉人,使用private,这样别人就都不知道她的真实年龄,而只有她自己知道。
class Xiaojiejie {
constructor(private _age:number){}
}
如果别人想知道,就必须通过getter
属性知道,注意我这里用的是属性,对他就是一个属性。getter
属性的关键字是get
,后边跟着类似方法的东西,但是你要注意,它并不是方法,归根到底还是属性。
class Xiaojiejie {
constructor(private _age:number){}
get age(){
return this._age
}
}
const dajiao = new Xiaojiejie(28)
console.log(dajiao.getAge)
玄妙就在于getter里,我们可以对_age进行处理,比如别人问的时候我们就偷摸的减少 10 岁。
class Xiaojiejie {
constructor(private _age:number){}
get age(){
return this._age-10
}
}
13.1.2 Setter
\_age
是私有的,那类的外部就没办法改变,所以这时候可以用setter
属性进行改变
class Xiaojiejie {
constructor(private _age:number){}
get age(){
return this._age-10
}
set age(age:number){
this._age=age
}
}
const dajiao = new Xiaojiejie(28)
dajiao.age=25
console.log(dajiao.age)
13.2 类中的 static
我们先写一下最常规的写法:
class Girl {
sayLove() {
return "I Love you";
}
}
const girl = new Girl();
console.log(girl.sayLove());
但是现在你不想new
出对象,而直接使用这个方法,那TypeScript
为你提供了快捷的方式,用static
声明的属性和方法,不需要进行声明对象,就可以直接使用
class Girl {
static sayLove() {
return "I Love you";
}
}
console.log(Girl.sayLove());
需要注意的是,用
static
声明的属性和方法,才不需要进行声明对象
14 类的只读属性和抽象类
抽象类很父类很像,都需要继承,但是抽象类里一般都有抽象方法。继承抽象类的类必须实现抽象方法才可以。在讲抽象类之前,还需要讲一下类里的只读属性readonly
14.1 类里的只读属性readonly
新建一个文件Demo14.ts
,然后写下面一个类,并进行实例化和赋值操作,代码如下:
class Person {
constructor(public name:string ){ }
}
const person = new Person('wibus')
console.log(person.name)
写完后我们可以在终端(Terminal)中看一下结果,结果就应该是wibus
。
比如我现在有一个需求,就是在实例化对象时赋予的名字,以后不能再更改了,也就是我们常说的只读属性。我们先来看现在这种情况是可以随意更改的,比如我写下面的代码。
class Person {
constructor(public name:string ){ }
}
const person = new Person('wibus')
person.name= 'wibus-wee'
console.log(person.name)
这时候就可以用一个关键词readonly
,也就是只读的意思,来修改Person
类代码。
class Person {
public readonly _name :string;
constructor(name:string ){
this._name = name;
}
}
const person = new Person('wibus')
person._name= 'wibus-wee'
console.log(person._name)
这样写完后,VSCode
就回直接给我们报错,告诉我们_name
属性是只读属性,不能修改
14.2 抽象类的使用
什么是抽象类?举个例子,比如我开了一个洗浴中心,里边有服务员,有初级技师,高级技师,每一个岗位我都写成一个类,那代码就是这样的:
class Waiter {}
class BaseTeacher {}
class seniorTeacher {}
我作为老板,我要求无论是什么职位,都要有独特的技能,比如服务员就是给顾客倒水,初级技师要求会泰式按摩,高级技师要求会 SPA 全身按摩。这是一个硬性要求,但是每个职位的技能有不同,这时候就可以用抽象类来解决问题。
抽象类的关键词是abstract
,里边的抽象方法也是abstract
开头的,现在我们就写一个Girl
的抽象类。
abstract class Girl{
abstract skill() //因为没有具体的方法,所以我们这里不写括号
}
有了这个抽象类,三个类就可以继承这个类,然后会要求必须实现skill()
方法,代码如下:
abstract class Girl{
abstract skill() //因为没有具体的方法,所以我们这里不写括号
}
class Waiter extends Girl{
skill(){
console.log('大爷,请喝水!')
}
}
class BaseTeacher extends Girl{
skill(){
console.log('大爷,来个泰式按摩吧!')
}
}
class seniorTeacher extends Girl{
skill(){
console.log('大爷,来个SPA全身按摩吧!')
}
}
通过这个例子,你也许能对抽象类和抽象方法有一个比较深的认识。其实在实际生产中我们也会把这样的需求用接口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的:https://iucky.cn/posts/code/typescript-1
15.2 让 tsconfig.json 文件生效
你现在可以在文件夹跟目录建立一个demo.ts
文件,然后编写一些最简单的代码,代码如下:
const person: string = "wibus";
这时候我们不在使用ts-node
直接执行了,需要用tsc demo.ts
进行编译,编译后会得到demo.js
文件。 生成的代码如下:
var person = "wibus";
这时候好像一切都是正常的,但是我要告诉你的真相是tsconfig.json
这个编译配置文件并没有生效。
此时我们打开tsconfig.json
文件,找到complilerOptions
属性下的removeComments:true
选项,把注释去掉。
这个配置项的意思是,编译时不显示注释,也就是编译出来的js
文件不显示注释内容。
现在你在文件中加入一些注释,比如:
// I love wibus
const person: string = "wibus";
这时候再运行编译代码tsc demo.ts
,编译后打开demo.js
文件,你会发现注释依然存在,说明tsconfig.json
文件没有起作用。
如果要想编译配置文件起作用,我们可以直接运行tsc
命令,这时候tsconfig.json
才起作用,可以看到生成的js
文件已经不带注释了。
那现在又出现问题了,如果我们的跟目录下有多个ts
文件,我们却只想编译其中的一个文件时,如何作?
我们在项目根目录,新建一个文件demo2.ts
文件,然后也写一段最简单的 ts 代码。
const person2: string = "jspang.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
文件和它的使用方法,文件里边还有很多配置项,这些我们都会逐步讲到。