title: 类

原文地址

在本教程中,你将学习 TypeScript 中的类。

TypeScript 中的类介绍

JavaScript 不像其他编程语言,如 JavaC# ,有类的概念,在 ES5 中,你可以通过构造函数和 原型继承 来创建一个“类”。比如要创建一个有 ssnfirstNamelastName 三个属性的 Person 类,你可以使用如下所示的构造函数:

  1. function Person(ssn, firstName, lastName) {
  2. this.ssn = ssn;
  3. this.firstName = firstName;
  4. this.lastName = lastName;
  5. }

接下来,定义一个原型方法,通过连接 firstNamelastName 属性值的方式来获得人名全称:

  1. Person.prototype.getFullName = function () {
  2. return `${this.firstName} ${this.lastName}`;
  3. };

然后可以通过 Person “类”创建一个新的对象:

  1. let person = new Person('171-28-0926', 'John', 'Doe');
  2. console.log(person.getFullName());

它会在控制台上打印出下面的信息:

  1. John Doe

ES6 允许你定义一个类,它是创建对应的构造函数和原型继承的语法糖:

  1. class Person {
  2. ssn;
  3. firstName;
  4. lastName;
  5. constructor(ssn, firstName, lastName) {
  6. this.ssn = ssn;
  7. this.firstName = firstName;
  8. this.lastName = lastName;
  9. }
  10. }

在上面类的语法中,构造函数已经被明确定义在类中。接下来增加 getFullName() 方法:

  1. class Person {
  2. ssn;
  3. firstName;
  4. lastName;
  5. constructor(ssn, firstName, lastName) {
  6. this.ssn = ssn;
  7. this.firstName = firstName;
  8. this.lastName = lastName;
  9. }
  10. getFullName() {
  11. return `${this.firstName} ${this.lastName}`;
  12. }
  13. }

使用 Person 类和使用 Person 构造函数创建的对象是一样的:

  1. let person = new Person('171-28-0926', 'John', 'Doe');
  2. console.log(person.getFullName());

TypeScript 中的类给它的属性和方法增加了 类型注释。下面演示了 TypeScript 中的 Person 类的使用方法:

  1. class Person {
  2. ssn: string;
  3. firstName: string;
  4. lastName: string;
  5. constructor(ssn: string, firstName: string, lastName: string) {
  6. this.ssn = ssn;
  7. this.firstName = firstName;
  8. this.lastName = lastName;
  9. }
  10. getFullName(): string {
  11. return `${this.firstName} ${this.lastName}`;
  12. }
  13. }

当你给类的属性,构造函数和方法增加类型注释,TypeScript 编译器会进行对应的类型检查。例如,你不能把 ssn 初始化为一个 number 类型的值,下面的代码会抛出错误提示:

  1. let person = new Person(171280926, 'John', 'Doe');

小结

  • 在 TypeScript 中使用 class 关键字定义类;
  • TypeScript 给 ES6 类的语法添加类型注释,让类的使用更具有健壮性。