TypeScript 入门指北（二）

上篇文章我们提到了为什么要学 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 中是否存在非抽象函数，否则没有必要写。

系列文章：

• TypeScript 入门指北（一）

参考资料：

• TypeScript 中文文档

练习地址：https://www.tslang.cn/play/index.html

扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号，那么就可以第一时间收到我的最新文章。