接口除了约束结构之外,接口的另一个用途 —— 对类的一部分行为进行抽象。

类实现接口

  1. interface Alarm {
  2. alert(): void;
  3. }
  4. class Door {
  5. open() {
  6. console.log("Door open");
  7. }
  8. close() {
  9. console.log("Door close");
  10. }
  11. }
  12. // 继承了 Door 类,实现了 Alarm 接口
  13. class SecurityDoor extends Door implements Alarm {
  14. alert() {
  15. console.log("SecurityDoor alert");
  16. }
  17. }

类实现多个接口

  1. interface Alarm {
  2. alert(): void;
  3. }
  4. interface Light {
  5. lightOn(): void;
  6. lightOff(): void;
  7. }
  8. // Car 同时实现了 Alarm 和 Light 接口
  9. class Car implements Alarm, Light {
  10. alert() {
  11. console.log("Car alert");
  12. }
  13. lightOn() {
  14. console.log("Car light on");
  15. }
  16. lightOff() {
  17. console.log("Car light off");
  18. }
  19. }

接口继承接口

LightableAlarm 继承了 Alarm,除了拥有 alert 方法之外,还拥有两个新方法 lightOn 和 lightOff。

  1. interface Alarm {
  2. alert(): void;
  3. }
  4. interface LightableAlarm extends Alarm {
  5. lightOn(): void;
  6. lightOff(): void;
  7. }
  8. class Car implements LightableAlarm {
  9. alert() {
  10. console.log("Car alert");
  11. }
  12. lightOn() {
  13. console.log("Car light on");
  14. }
  15. lightOff() {
  16. console.log("Car light off");
  17. }
  18. }

接口继承类

常见的面向对象语言中,接口是不能继承类的,但是在 TypeScript 中却是可以的:

  1. class Point2d {
  2. x: number;
  3. y: number;
  4. constructor(x: number, y: number) {
  5. this.x = x;
  6. this.y = y;
  7. }
  8. }
  9. interface Point3d extends Point2d {
  10. z: number;
  11. }
  12. const point3d: Point3d = { x: 1, y: 2, z: 3 };

「接口继承类」和「接口继承接口」没有什么本质的区别。

实际上,当我们在声明 class Point 时,除了会创建一个名为 Point 的类之外,同时也创建了一个名为 Point 的类型(实例的类型)。

  1. // 声明 class Point2d 时,会创建一个名为 Point2d 的类
  2. class Point2d {
  3. x: number;
  4. y: number;
  5. constructor(x: number, y: number) {
  6. this.x = x;
  7. this.y = y;
  8. }
  9. }
  10. // 同时也创建了一个名为 Point2d 的类型(实例的类型)
  11. interface Point2dInstanceType {
  12. x: number;
  13. y: number;
  14. }
  15. // 等价于 interface Point3d extends Point2dInstanceType
  16. interface Point3d extends Point2d {
  17. z: number;
  18. }
  19. const point3d: Point3d = { x: 1, y: 2, z: 3 };