混合

TypeScript (和 JavaScript) 类只能严格的单继承，因此你不能做：

  1. class User extends Tagged, Timestamped { // ERROR : 不能多重继承
  2.   // ..
  3. }

从可重用组件构建类的另一种方式是通过基类来构建它们，这种方式称为混合。

这个主意是简单的，采用函数 B 接受一个类 A，并且返回一个带有新功能的类的方式来替代 A 类扩展 B 来获取 B 上的功能，前者中的 B 即是混合。

TIP

「混合」是一个函数：

  • 传入一个构造函数；
  • 创建一个带有新功能，并且扩展构造函数的新类；
  • 返回这个新类。

一个完整的例子：

  1. // 所有 mixins 都需要
  2. type Constructor<T = {}> = new (...args: any[]) => T;
  4. /////////////
  5. // mixins 例子
  6. ////////////
  8. // 添加属性的混合例子
  9. function TimesTamped<TBase extends Constructor>(Base: TBase) {
  10.   return class extends Base {
  11.     timestamp = Date.now();
  12.   };
  13. }
  15. // 添加属性和方法的混合例子
  16. function Activatable<TBase extends Constructor>(Base: TBase) {
  17.   return class extends Base {
  18.     isActivated = false;
  20.     activate() {
  21.       this.isActivated = true;
  22.     }
  24.     deactivate() {
  25.       this.isActivated = false;
  26.     }
  27.   };
  28. }
  30. ///////////
  31. // 组合类
  32. ///////////
  34. // 简答的类
  35. class User {
  36.   name = '';
  37. }
  39. // 添加 TimesTamped 的 User
  40. const TimestampedUser = TimesTamped(User);
  42. // Tina TimesTamped 和 Activatable 的类
  43. const TimestampedActivatableUser = TimesTamped(Activatable(User));
  45. //////////
  46. // 使用组合类
  47. //////////
  49. const timestampedUserExample = new TimestampedUser();
  50. console.log(timestampedUserExample.timestamp);
  52. const timestampedActivatableUserExample = new TimestampedActivatableUser();
  53. console.log(timestampedActivatableUserExample.timestamp);
  54. console.log(timestampedActivatableUserExample.isActivated);

让我们分解这个例子。

创建一个构造函数

混合接受一个类，并且使用新功能扩展它。因此，我们需要定义构造函数的类型：

  1. type Constructor<T = {}> = new (...args: any[]) => T;

扩展一个类并且返回它

  1. // 添加属性的混合例子
  2. function TimesTamped<TBase extends Constructor>(Base: TBase) {
  3.   return class extends Base {
  4.     timestamp = Date.now();
  5.   };
  6. }

原文: https://jkchao.github.io/typescript-book-chinese/typings/mixins.html