菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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());
自己动手试一试 »

w3schools CERTIFIED . 2022

获得认证!

完成 TypeScript 模块,做练习,参加考试,成为 W3Schools 认证!!

$45 报名

继承:实现

接口(在此处 介绍)可用于通过 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;
  }
}
自己动手试一试 »
抽象类不能直接实例化,因为它们没有实现所有成员。

TypeScript 练习

通过练习来测试自己

练习

指定 Person.name 只能在类内部访问,而 Person.getName() 方法可以在任何地方访问

class Person {
  name: string;

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

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

开始练习


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持