2
头图
上篇文章我们提到了为什么要学 TypeScript, 以及通过 TypeScriptJavaScript 的简单对比,熟悉了 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老师的前端补习班」关注我的微信公众号,那么就可以第一时间收到我的最新文章。


tonychen
1.2k 声望272 粉丝