导航
×
   ❮   
HTML CSS JavaScript PHP Python C C++ Go Sass W3C Colors TypeScript ECMS

TypeScript 类


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

在此处 了解更多关于 JavaScript 类。


成员:类型

类的成员(属性和方法)使用类型注解进行类型化,类似于变量。

实例

class Person {
  name: string;
}

const person = new Person();
person.name = "Jane";
亲自试一试 »

成员:可见性

类成员还可以添加特殊的修饰符,这些修饰符会影响可见性。

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

  • public - (默认)允许从任何地方访问类成员
  • private - 仅允许从类内部访问类成员
  • protected - 允许类成员本身以及继承它的任何类访问,这在下面的继承部分中介绍

实例

class Person {
  private name: string;

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

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

const person = new Person("Jane");
console.log(person.getName()); // person.name 由于是私有的,因此无法从类外部访问
亲自试一试 »
类中的 this 关键字通常指向类的实例。在此处 了解更多关于 this 的信息。

参数属性

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

实例

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

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

const person = new Person("Jane");
console.log(person.getName());
亲自试一试 »

只读

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

实例

class Person {
  private readonly name: string;

  public constructor(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 constructor(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 constructor(protected readonly width: number, protected readonly height: number) {}

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

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

  // getArea 从 Rectangle 继承
}
亲自试一试 »

重写

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

较新版本的 TypeScript 允许使用 override 关键字显式标记此操作。

实例

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

class Rectangle implements Shape {
  // 使用 protected 修饰符可以允许扩展此类的类(如 Square)访问这些成员
  public constructor(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 constructor(width: number) {
    super(width, width);
  }

  // 此 toString 方法覆盖了 Rectangle 的 toString 方法
  public override toString(): string {
    return `Square[width=${this.width}]`;
  }
}
亲自试一试 »
默认情况下,重写方法时 override 关键字是可选的,它仅有助于防止意外重写不存在的方法。使用 noImplicitOverride 设置来强制在重写时使用它。

抽象类

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

实例

abstract class 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;
  }
}
亲自试一试 »
抽象类不能直接实例化,因为它们没有实现所有成员。

Copyright ©2026 蒙ICP备2026009383号 All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。