TypeScript（七）类

目录

前言

基本用法

实现接口

继承（extends）

基本用法

访问父类

重写父类（override）

只读关键字（readonly）

存取器（getters/setters）

静态成员（static）

访问修饰符（类成员属性）

JavaScript中的封装

TypeScript中的封装

公共（public）

私有（private）

受保护（protected）

参数的修饰符

抽象类和抽象方法（abstract）

接口（interface），抽象（abstract），重写（override）

结语

参考文章：

---

前言

本文收录于TypeScript知识总结系列文章，欢迎指正！ 

在早期的JavaScript中，我们使用函数来模拟类，使用原型链实现继承行为。在ES6以后JS也引入类的概念，虽然其本质还是使用原型继承和构造函数的语法糖实现的，但是类的写法依旧使得开发人员得心应手；相比JS的类，TS的类可以说是有过之无不及。

在TypeScript中，类可以包含属性和方法，支持继承和接口实现，也可以使用修饰符来控制访问权限。类的定义使用class关键字，并可以在其中声明构造函数、属性、方法等。

基本用法

还记得之前的接口吗？我们把要实现的对象或者类通过接口的形式抽象表现出来，然后通过实现类或者绑定对象将接口具象化

沿用之前的例子展示一下类的基本写法，其中name是类成员（属性），constructor是构造函数，getName是成员方法

class Animal {
    name: string
    constructor(name: string) {
        this.name = name
    }
    getName() {
        return this.name
    }
}
const animal = new Animal("dog")
console.log(animal.getName());

实现接口

在接口中我们说到了类可以用了实现接口或者是对象类型别名，下面是一个例子，我们复习一下

interface IAnimel {
    name: string
    likeMeat: boolean
    getName(): string
}
class Animal implements IAnimel {
    name: string
    likeMeat: boolean
    constructor(name: string, likeMeat: boolean) {
        this.name = name
        this.likeMeat = likeMeat
    }
    getName() {
        return this.name
    }
}
const animal = new Animal("dog", true)
console.log(animal.getName());

继承（extends）

在TS中类的继承是通过extends关键字来实现的。类可以继承其他类的属性和方法，被继承的类称为父类或基类，继承的类称为子类或派生类；在之前的文章中，我详细的讲述了JS的继承实现及使用，有兴趣可以看看

基本用法

下面是一个继承的基本写法

class Animal {
    name: string
    constructor(name: string) {
        this.name = name
    }
    getName() {
        return this.name
    }
}
class Dog extends Animal {
    constructor(name: string) {
        super(name)
    }
}
console.log(new Dog("阿黄").getName());

可以看到，Dog类继承于Animal类，并拥有Animal的属性及方法

访问父类

在TS中，子类中可以通过super来访问父类的属性和方法。

例如，如果父类有一个属性name，可以在子类中通过super.name来访问该属性。同时，如果子类中有与父类同名的属性或方法，可以使用super关键字来调用父类的属性或方法，如super.getName()

class Animal {
    name: string
    constructor(name: string) {
        this.name = name;
    }
    getName() {
        return this.name
    }
}

class Dog extends Animal {
    name: string = null
    constructor(name: string) {
        super(name);
        this.name = "小黑"
        console.log(this.name, super.name);// 小黑 undefined
    }
    getAllName(): string {
        return this.name + super.getName()// 获取了当前类的name
    }
}
console.log(new Dog("阿黄").getAllName());// 小黑小黑

然而在TS编译成JS时，会出现取不到super.name的情况，详细解释可以参考