TypeScript 类（class）与修饰符、继承、实现的详细使用

前端

2024-01-02 00:49:04

TypeScript 作为一种面向对象的语言，其具备传统面向对象语言的大多数特性，包括类（class）、修饰符、继承和实现。

一、简介

通过 class 定义一个类，然后通过 new 关键字可以方便地生产一个类的实例对象，这个生产对象的过程叫实例化，类的成员就是类中所有的属性和方法。

实例在 new 出来的时候，它实际是创建了一个普通 JavaScript 对象，只不过这个对象拥有类中所定义的属性和方法，并且它的 [[Prototype]] 指向类的原型对象。

类在 TypeScript 中的主要应用场景有：

对象建模：将具有相同属性和行为的对象抽象成一个类，并通过 new 关键字可以创建任意多个该类的实例对象，用于存储和操作不同对象的数据。
代码复用：通过将具有相同属性和行为的对象抽象成一个类，可以方便地复用代码，避免重复书写。
封装：通过将属性和方法封装在类中，可以控制对这些属性和方法的访问权限，实现数据的隐藏和保护。

二、类及其修饰符

在 TypeScript 中，类的定义如下：

class ClassName {
  // 类成员
}

其中：

ClassName 为类的名称。
{} 为类的主体，用于定义类的成员。

类的修饰符有：

public：表示该类成员（属性或方法）是公共的，可以被任何对象访问。
protected：表示该类成员是受保护的，只能被该类及其子类访问。
private：表示该类成员是私有的，只能被该类本身访问。

三、继承

继承是一种创建新类的方法，新类可以从一个或多个已有的类继承属性和方法。

在 TypeScript 中，继承的语法如下：

class Subclass extends Superclass {
  // 子类成员
}

其中：

Subclass 为子类的名称。
Superclass 为父类的名称。
{} 为子类的主体，用于定义子类的成员。

子类可以继承父类所有的 public 和 protected 成员，但不能继承 private 成员。

子类可以重写父类的方法，但不能重写父类的属性。

四、实现

实现是一种类实现接口的方式，接口定义了类的行为，而类实现了接口中定义的方法。

在 TypeScript 中，实现的语法如下：

class ClassName implements InterfaceName {
  // 类成员
}

其中：

ClassName 为类的名称。
InterfaceName 为接口的名称。
{} 为类的主体，用于定义类的成员。

类实现了接口中的所有方法，但不需要实现接口中的属性。

五、示例

下面是一个 TypeScript 类的示例：

class Person {
  public name: string;
  protected age: number;
  private address: string;

  constructor(name: string, age: number, address: string) {
    this.name = name;
    this.age = age;
    this.address = address;
  }

  public greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }

  protected getAge() {
    return this.age;
  }

  private getAddress() {
    return this.address;
  }
}

class Student extends Person {
  public major: string;

  constructor(name: string, age: number, address: string, major: string) {
    super(name, age, address);
    this.major = major;
  }

  public study() {
    console.log(`I am studying ${this.major}.`);
  }
}

const person = new Person('John Doe', 30, '123 Main Street');
person.greet(); // Hello, my name is John Doe.

const student = new Student('Jane Doe', 20, '456 Elm Street', 'Computer Science');
student.greet(); // Hello, my name is Jane Doe.
student.study(); // I am studying Computer Science.