上篇文章我们提到了为什么要学TypeScript
, 以及通过TypeScript
跟JavaScript
的简单对比,熟悉了TypeScript
一些较为基础的语法。
学过面向对象的同学都知道,面向对象的三个基本要素就是:
- 封装
- 继承
- 多态
在 TypeScript
中,这几种语法都与之有密切的联系:
- 函数
- 接口
- 类
- 泛型
当然,函数 和 接口 在上篇文章已经讲过了,这篇文章着重讲一下类。
类
在面向对象编程(OOP
)中,类是对对象的一个高度的抽象。打个比方,女朋友可以看成一个对象,因为女朋友是具体的一个人;而女人/人则可以看成一个类,因为它是泛指的。
根据这个关系,我们可以用 TypeScript
来定义一个 Woman
类并且 new
一个对象(女朋友)出来:
class Woman {}
let girlFriend = new Woman()
可以看到,这个对象什么都没有,接下来我们给她添加点属性上去,让她变得更立体一些。
属性
属性包含:
- 私有属性(
private
): 属性被声明为private
(私有)之后,不能在类之外的地方访问。 - 公有属性(
public
):如果不标记,则属性默认被声明为public
(公有)。 - 保护属性(
protected
):属性被声明为protected
(保护)之后,不能再类之外的地方访问,但是可以在派生类中访问,也就是说在它的子类中可以访问这个属性。 - 静态属性(
static
):属性被声明为static
(静态),此时该属性属于类而不属于类的实例或者子类,相应的需要在属性前加上类名才能访问。
我们简单拓展下上面那段代码,给 Woman
类添加几个属性:
- 姓名
- 身高
- 年龄
...
class Woman { public name: string; public height: number; private age: number; }
在拓展这个类的时候我们发现,其实
Woman
类还能够再抽象成 人类(Person
),而这就涉及到了继承。
继承
我们定义一个 Person
类,并让 Woman
继承 Person
:
// 父类
class Person {
public height: number;
protected name: string;
public age: number;
constructor (name: string, height: number, age: number) {
this.name = name
this.height = height
this.age = age
}
}
// 子类
class Woman extends Person {
constructor(name: string, height: number, age: number) {
super(name, height, age)
}
}
let girlFriend = new Woman('girl', 180, 18)
抽象类和抽象方法
抽象类 和 抽象方法 的定义方式都是在前边加一个 abstract
关键字,不同的是,抽象类 可以包含具体的属性和函数实现,但是 抽象函数 则必须在子类中实现。换言之,抽象类 可以拥有自己的独立行为,但是 抽象函数 则跟 接口(interface
)类似,不包括具体的实现。
因此,上面的例子我们可以再进行拓展,将 Person
定义成一个抽象类,再让 Woman
继承它
// 父类
abstract class Person {
public height: number;
protected name: string;
public age: number;
constructor (name: string, height: number, age: number) {
this.name = name
this.height = height
this.age = age
}
abstract moYu (): void;
walk (): void {
console.log('walk')
}
}
// 子类
class Woman extends Person {
constructor(name: string, height: number, age: number) {
super(name, height, age)
}
moYu () {
console.log('今天你摸鱼了吗?')
}
}
let girlFriend = new Woman('girl', 180, 18)
这里 Person
的属性是否定义,取决于 Person
中是否存在非抽象函数,否则没有必要写。
系列文章:
参考资料:
练习地址:https://www.tslang.cn/play/index.html
扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号,那么就可以第一时间收到我的最新文章。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。