TypeScript入门指北(二)

上篇文章我们提到了为什么要学 TypeScript, 以及通过 TypeScriptJavaScript 的简单对比,熟悉了 TypeScript 一些较为基础的语法。

学过面向对象的同学都知道,面向对象的三个基本要素就是:

  • 封装
  • 继承
  • 多态

TypeScript 中,这几种语法都与之有密切的联系:

  • 函数
  • 接口
  • 泛型

当然,函数接口上篇文章已经讲过了,这篇文章着重讲一下

在面向对象编程(OOP)中,类是对对象的一个高度的抽象。打个比方,女朋友可以看成一个对象,因为女朋友是具体的一个人;而女人/人则可以看成一个类,因为它是泛指的。

根据这个关系,我们可以用 TypeScript 来定义一个 Woman 类并且 new 一个对象(女朋友)出来:

1
2
class Woman {}
let girlFriend = new Woman()

可以看到,这个对象什么都没有,接下来我们给她添加点属性上去,让她变得更立体一些。

属性

属性包含:

  • 私有属性private): 属性被声明为 private(私有)之后,不能在类之外的地方访问。
  • 公有属性public):如果不标记,则属性默认被声明为 public(公有)。
  • 保护属性protected):属性被声明为 protected(保护)之后,不能再类之外的地方访问,但是可以在派生类中访问,也就是说在它的子类中可以访问这个属性。
  • 静态属性static):属性被声明为 static(静态),此时该属性属于而不属于的实例或者子类,相应的需要在属性前加上类名才能访问。

我们简单拓展下上面那段代码,给 Woman 类添加几个属性:

  • 姓名
  • 身高
  • 年龄
  • 1
    2
    3
    4
    5
    class Woman {
    public name: string;
    public height: number;
    private age: number;
    }
    在拓展这个类的时候我们发现,其实 Woman 类还能够再抽象成 人类Person),而这就涉及到了继承。

继承

我们定义一个 Person 类,并让 Woman 继承 Person

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 父类
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 继承它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 父类
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