类

在实际业务中，任何实体都可以被抽象为一个使用类表达的类似对象的数据结构，且这个数据结构既包含属性，又包含方法，比如我们在下方抽象了一个狗的类。

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

  bark() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Q");
dog.bark(); // => 'Woof! Woof!'

首先，我们定义了一个 class Dog ，它拥有 string 类型的 name 属性、bark 方法和一个构造器函数。然后，我们通过 new 关键字创建了一个 Dog 的实例，并把实例赋值给变量 dog。最后，我们通过实例调用了类中定义的 bark 方法。

如果使用传统的 JavaScript 代码定义类，我们需要使用函数+原型链的形式进行模拟，如下代码所示：

function Dog(name: string) {
  this.name = name; // ts(2683) 'this' implicitly has type 'any' because it does not have a type annotation.
}
Dog.prototype.bark = function () {
  console.log("Woof! Woof!");
};

const dog = new Dog("Q"); // ts(7009) 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.
dog.bark(); // => 'Woof! Woof!'

在第 1 ～ 3 行，我们定义了 Dog 类的构造函数，并在构造函数内部定义了 name 属性，再在第 4 行通过 Dog 的原型链添加 bark 方法。

和通过 class 方式定义类相比，这种方式明显麻烦不少，而且还缺少静态类型检测。

继承

类的主要特性

在 TypeScript 中，使用 extends 关键字就能很方便地定义类继承的抽象模式，如下代码所示：

class Animal {
  type = "Animal";
  say(name: string) {
    console.log(`I'm ${name}!`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog();
dog.bark(); // => 'Woof! Woof!'
dog.say("Q"); // => I'm Q!
dog.type; // => Animal

上面的例子展示了类最基本的继承用法。比如第 8 ～ 12 行定义的 Dog 是派生类，它派生自第 1 ～ 6 行定义的 Animal 基类，此时 Dog 实例继承了基类 Animal 的属性和方法。因此，在第 15 ～ 17 行我们可以看到，实例 dog 支持 bark、say、type 等属性和方法。

说明：派生类通常被称作子类，基类也被称作超类（或者父类）。

派生类如果包含一个构造函数，则必须在构造函数中调用 super() 方法，这是 TypeScript 强制执行的一条重要规则。

如下示例，因为第 1 ～ 10 行定义的 Dog 类构造函数中没有调用 super 方法，所以提示了一个 ts(2377) 的错误；而第 12 ～ 22 行定义的 Dog 类构造函数中添加了 super 方法调用，所以可以通过类型检测。

class Dog extends Animal {
  name: string;
  constructor(name: string) {
    // ts(2377) Constructors for derived classes must contain a 'super' call.
    this.name = name;
  }

  bark() {
    console.log("Woof! Woof!");
  }
}

class Dog extends Animal {
  name: string;
  constructor(name: string) {
    super(); // 添加 super 方法
    this.name = name;
  }

  bark() {
    console.log("Woof! Woof!");
  }
}

这里的 super 函数会调用基类的构造函数，如下代码所示：

class Animal {
  weight: number;
  type = "Animal";
  constructor(weight: number) {
    this.weight = weight;
  }
  say(name: string) {
    console.log(`I'm ${name}!`);
  }
}

class Dog extends Animal {
  name: string;
  constructor(name: string) {
    super(); // ts(2554) Expected 1 arguments, but got 0.
    this.name = name;
  }

  bark() {
    console.log("Woof! Woof!");
  }
}

将鼠标放到第 15 行 Dog 类构造函数调用的 super 函数上，我们可以看到一个提示，它的类型是基类 Animal 的构造函数：constructor Animal(weight: number): Animal 。并且因为 Animal 类的构造函数要求必须传入一个数字类型的 weight 参数，而第 15 行实际入参为空，所以提示了一个 ts(2554) 的错误；如果我们显式地给 super 函数传入一个 number 类型的值，比如说 super(20)，则不会再提示错误了。

公共、私有与受保护的修饰符

类属性和方法除了可以通过 extends 被继承之外，还可以通过修饰符控制可访问性。

在 TypeScript 中就支持 3 种访问修饰符，分别是 public、private、protected。

• public 修饰的是在任何地方可见、公有的属性或方法；

• private 修饰的是仅在同一类中可见、私有的属性或方法；

• protected 修饰的是仅在类自身及子类中可见、受保护的属性或方法。

在之前的代码中，示例类并没有用到可见性修饰符，在缺省情况下，类的属性或方法默认都是 public。如果想让有些属性对外不可见，那么我们可以使用 private 进行设置，如下所示：

class Son {
  public firstName: string;
  private lastName: string = "Stark";
  constructor(firstName: string) {
    this.firstName = firstName;
    this.lastName; // ok
  }
}

const son = new Son("Tony");
console.log(son.firstName); //  => "Tony"
son.firstName = "Jack";
console.log(son.firstName); //  => "Jack"
console.log(son.lastName); // ts(2341) Property 'lastName' is private and only accessible within class 'Son'.

在上面的例子中我们可以看到，第 3 行 Son 类的 lastName 属性是私有的，只在 Son 类中可见；第 2 行定义的 firstName 属性是公有的，在任何地方都可见。因此，我们既可以通过第 10 行创建的 Son 类的实例 son 获取或设置公共的 firstName 的属性（如第 11 行所示），还可以操作更改 firstName 的值（如第 12 行所示）。

不过，对于 private 修饰的私有属性，只可以在类的内部可见。比如第 6 行，私有属性 lastName 仅在 Son 类中可见，如果其他地方获取了 lastName ，TypeScript 就会提示一个 ts(2341) 的错误（如第 14 行）。

⚠️ 注意：TypeScript 中定义类的私有属性仅仅代表静态类型检测层面的私有。如果我们强制忽略 TypeScript 类型的检查错误，转译且运行 JavaScript 时依旧可以获取到 lastName 属性，这是因为 JavaScript 并不支持真正意义上的私有属性。

接下来我们再看一下受保护的属性和方法，如下代码所示：

class Son {
  public firstName: string;
  protected lastName: string = "Stark";
  constructor(firstName: string) {
    this.firstName = firstName;
    this.lastName; // ok
  }
}

class GrandSon extends Son {
  constructor(firstName: string) {
    super(firstName);
  }

  public getMyLastName() {
    return this.lastName;
  }
}

const grandSon = new GrandSon("Tony");
console.log(grandSon.getMyLastName()); // => "Stark"
grandSon.lastName; // ts(2445) Property 'lastName' is protected and only accessible within class 'Son' and its subclasses.

在第 3 行，修改 Son 类的 lastName 属性可见修饰符为 protected，表明此属性在 Son 类及其子类中可见。如示例第 6 行和第 16 行所示，我们既可以在父类 Son 的构造器中获取 lastName 属性值，又可以在继承自 Son 的子类 GrandSon 的 getMyLastName 方法获取 lastName 属性的值。

⚠️ 虽然我们不能通过派生类的实例访问 protected 修饰的属性和方法，但是可以通过派生类的实例方法进行访问。比如示例中的第 21 行，通过实例的 getMyLastName 方法获取受保护的属性 lastName 是 ok 的，而第 22 行通过实例直接获取受保护的属性 lastName 则提示了一个 ts(2445) 的错误。

只读修饰符

在前面的例子中，Son 类 public 修饰的属性既公开可见，又可以更改值，如果我们不希望类的属性被更改，则可以使用 readonly 只读修饰符声明类的属性，如下代码所示：

class Son {
  public readonly firstName: string;
  constructor(firstName: string) {
    this.firstName = firstName;
  }
}
const son = new Son("Tony");
son.firstName = "Jack"; // ts(2540) Cannot assign to 'firstName' because it is a read-only property.

在第 2 行，我们给公开可见属性 firstName 指定了只读修饰符，这个时候如果再更改 firstName 属性的值，TypeScript 就会提示一个 ts(2540) 的错误（参见第 9 行）。这是因为只读属性修饰符保证了该属性只能被读取，而不能被修改。

⚠️ 注意：如果只读修饰符和可见性修饰符同时出现，我们需要将只读修饰符写在可见修饰符后面。

存取器

在 TypeScript 中可以通过 getter、setter 截取对类成员的读写访问。

通过对类属性访问的截取，我们可以实现一些特定的访问控制逻辑。下面我们把之前的示例改造一下，如下代码所示：

class Son {
  public firstName: string;
  protected lastName: string = "Stark";
  constructor(firstName: string) {
    this.firstName = firstName;
  }
}
class GrandSon extends Son {
  constructor(firstName: string) {
    super(firstName);
  }
  get myLastName() {
    return this.lastName;
  }
  set myLastName(name: string) {
    if (this.firstName === "Tony") {
      this.lastName = name;
    } else {
      console.error("Unable to change myLastName");
    }
  }
}
const grandSon = new GrandSon("Tony");
console.log(grandSon.myLastName); // => "Stark"
grandSon.myLastName = "Rogers";
console.log(grandSon.myLastName); // => "Rogers"
const grandSon1 = new GrandSon("Tony1");
grandSon1.myLastName = "Rogers"; // => "Unable to change myLastName"

在第 14 ～ 24 行，我们使用 myLastName 的 getter、setter 重写了之前的 GrandSon 类的方法，在 getter 中实际返回的是 lastName 属性。然后，在 setter 中，我们限定仅当 lastName 属性值为 'Tony' ，才把入参 name 赋值给它，否则打印错误。 在第 28 行中，我们可以像访问类属性一样访问 getter，同时也可以像更改属性值一样给 setter 赋值，并执行一些自定义逻辑。

在第 27 行，因为 grandSon 实例的 lastName 属性被初始化成了 'Tony'，所以在第 29 行我们可以把 'Rogers' 赋值给 setter 。而 grandSon1 实例的 lastName 属性在第 32 行被初始化为 'Tony1'，所以在第 33 行把 'Rogers' 赋值给 setter 时，打印了我们自定义的错误信息。

静态属性

类的所有属性和方法，只有类在实例化时才会被初始化。我们也可以给类定义静态属性和方法。

因为这些属性存在于类这个特殊的对象上，而不是类的实例上，所以我们可以直接通过类访问静态属性，如下代码所示：

class MyArray {
  static displayName = "MyArray";
  static isArray(obj: unknown) {
    return Object.prototype.toString.call(obj).slice(8, -1) === "Array";
  }
}
console.log(MyArray.displayName); // => "MyArray"
console.log(MyArray.isArray([])); // => true
console.log(MyArray.isArray({})); // => false

在第 2 ～ 3 行，通过 static 修饰符，我们给 MyArray 类分别定义了一个静态属性 displayName 和静态方法 isArray。之后，我们无须实例化 MyArray 就可以直接访问类上的静态属性和方法了，比如第 8 行访问的是静态属性 displayName，第 9 ～ 10 行访问的是静态方法 isArray。

基于静态属性的特性，我们往往会把与类相关的常量、不依赖实例 this 上下文的属性和方法定义为静态属性，从而避免数据冗余，进而提升运行性能。

⚠️ 注意：上边我们提到了不依赖实例 this 上下文的方法就可以定义成静态方法，这就意味着需要显式注解 this 类型才可以在静态方法中使用 this；非静态方法则不需要显式注解 this 类型，因为 this 的指向默认是类的实例。

抽象类

类的特性

是一种不能被实例化仅能被子类继承的特殊类。

可以使用抽象类定义派生类需要实现的属性和方法，同时也可以定义其他被继承的默认属性和方法，如下代码所示：

abstract class Adder {
  abstract x: number;
  abstract y: number;
  abstract add(): number;
  displayName = "Adder";
  addTwice(): number {
    return (this.x + this.y) * 2;
  }
}
class NumAdder extends Adder {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    super();
    this.x = x;
    this.y = y;
  }
  add(): number {
    return this.x + this.y;
  }
}
const numAdder = new NumAdder(1, 2);
console.log(numAdder.displayName); // => "Adder"
console.log(numAdder.add()); // => 3
console.log(numAdder.addTwice()); // => 6

在第 1 ～ 9 行，通过 abstract 关键字，我们定义了一个抽象类 Adder，并通过 abstract 关键字定义了抽象属性 x、y 及方法 add，而且任何继承 Adder 的派生类都需要实现这些抽象属性和方法。

同时，我们还在抽象类 Adder 中定义了可以被派生类继承的非抽象属性 displayName 和方法 addTwice。

然后，我们在第 10 ～ 21 行定义了继承抽象类的派生类 NumAdder， 并实现了抽象类里定义的 x、y 抽象属性和 add 抽象方法。如果派生类中缺少对 x、y、add 这三者中任意一个抽象成员的实现，那么第 12 行就会提示一个 ts(2515) 错误。

抽象类中的其他非抽象成员则可以直接通过实例获取，比如第 23 ～ 25 行中，通过实例 numAdder，我们获取了 displayName 属性和 addTwice 方法。

因为抽象类不能被实例化，并且派生类必须实现继承自抽象类上的抽象属性和方法定义，所以抽象类的作用其实就是对基础逻辑的封装和抽象。

实际上，我们也可以定义一个描述对象结构的接口类型抽象类的结构，并通过 implements 关键字约束类的实现。

使用接口与使用抽象类相比，区别在于接口只能定义类成员的类型，如下代码所示：

interface IAdder {
  x: number;
  y: number;
  add: () => number;
}
class NumAdder implements IAdder {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
  add() {
    return this.x + this.y;
  }
  addTwice() {
    return (this.x + this.y) * 2;
  }
}

在第 1 ～ 5 行，我们定义了一个包含 x、y、add 属性和方法的接口类型，然后在第 6 ～ 12 行实现了拥有接口约定的 x、y 属性和 add 方法，以及接口未约定的 addTwice 方法的 NumAdder 类 。

类的类型

类的特性——类的类型和函数类似，即在声明类的时候，其实也同时声明了一个特殊的类型（确切地讲是一个接口类型），这个类型的名字就是类名，表示类实例的类型；在定义类的时候，我们声明的除构造函数外所有属性、方法的类型就是这个特殊类型的成员。如下代码所示：

class A {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
const a1: A = {}; // ts(2741) Property 'name' is missing in type '{}' but required in type 'A'.
const a2: A = { name: "a2" }; // ok