前端必知必会-TypeScript 类

---

TypeScript 类

TypeScript 为 JavaScript 类添加了类型和可见性修饰符。

成员：类型

类的成员（属性和方法）使用类型注释进行类型化，类似于变量。

示例

class Person {
name: string;
}

const person = new Person();
person.name = "Jane";

成员：可见性

类成员还可以被赋予影响可见性的特殊修饰符。

TypeScript 中有三个主要的可见性修饰符。

public -（默认）允许从任何地方访问类成员
private - 仅允许从类内部访问类成员
protected - 允许从自身和继承它的任何类访问类成员，这将在下面的继承部分中介绍
示例

class Person {
private name: string;

public construction(name: string) {
this.name = name;
}

public getName(): string {
return this.name;
}
}

const person = new Person("Jane");
console.log(person.getName()); // person.name 是私有的，因此无法从类外部访问

类中的 this 关键字通常指类的实例。在此处阅读更多相关信息。

参数属性

TypeScript 提供了一种在构造函数中定义类成员的便捷方法，即向参数添加可见性修饰符。

示例

class Person {
// name 是私有成员变量
public construction(private name: string) {}

public getName(): string {
return this.name;
}
}

const person = new Person("Jane");
console.log(person.getName());

Readonly

与数组类似，readonly 关键字可以防止类成员被更改。

示例

class Person {
private readonly name: string;

public construction(name: string) {
// 在此初始定义之后无法更改 name，该定义必须在其声明处或构造函数中。
this.name = name;
}

public getName(): string {
return this.name;
}
}

const person = new Person("Jane");
console.log(person.getName());

继承：实现

接口（此处介绍）可用于通过 implements 关键字定义类必须遵循的类型。

示例

interface Shape {
getArea: () => number;
}

class Rectangle implements Shape {
public constor(protected readonly width: number, protected readonly height: number) {}

public getArea(): number {
return this.width * this.height;
}
}

一个类可以通过在 implements 后列出每个接口来实现多个接口，并用逗号分隔，如下所示：

class Rectangle implements Shape, Colored {

继承：扩展

类可以通过 extends 关键字相互扩展。一个类只能扩展一个其他类。

示例

interface Shape {
getArea: () => number;
}

class Rectangle implements Shape {
public constor(protected readonly width: number, protected readonly height: number) {}

public getArea(): number {
return this.width * this.height;
}
}

class Square extends Rectangle {
public constor(width: number) {
super(width, width);
}

// getArea 从 Rectangle 继承
}

覆盖

当一个类扩展另一个类时，它可以用相同的名称替换父类的成员。

较新版本的 TypeScript 允许使用 override 关键字明确标记这一点。

示例

interface Shape {
getArea: () => number;
}

class Rectangle implements Shape {
// 对这些成员使用 protected 允许从此类扩展的类（例如 Square）进行访问
public constrained (protected readonly width: number, protected readonly height: number) {}

public getArea(): number {
return this.width * this.height;
}

public toString(): string {
return `Rectangle[width=${this.width}, height=${this.height}]`;
}
}

class Square extends Rectangle {
public constrained (width: number) {
super(width, width);
}

// 此 toString 替换 Rectangle 中的 toString
public override toString(): string {
return `Square[width=${this.width}]`;
}
}

默认情况下，覆盖方法时 override 关键字是可选的，仅有助于防止意外覆盖不存在的方法。使用设置 noImplicitOverride 强制在覆盖时使用它。

抽象类

可以以允许它们用作其他类的基类的方式编写类，而无需实现所有成员。这是通过使用 abstract 关键字来实现的。未实现的成员也使用 abstract 关键字。

示例

abstract  Polygon {
public abstract getArea(): number;

public toString(): string {
return `Polygon[area=${this.getArea()}]`;
}
}

class Rectangle extends Polygon {
  public constructor(protected readonly width: number, protected readonly height: number) {
    super();
  }

  public getArea(): number {
    return this.width * this.height;
  }
}

抽象类不能直接实例化，因为它们没有实现所有成员。

---

总结

本文介绍了TypeScript 类的使用，如有问题欢迎私信和评论