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/in...

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