走进TypeScript之Mixins的实现_typescript 可重用组件 mixin-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39545346/article/details/122134091

本文详细介绍了 Mixins 在面向对象编程中的应用，通过实例演示如何通过实现 Eat 和 Run 混合到 Dog 类中，扩展其功能并创建占位属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初识

Mixins解决的问题：

以一种可重用组件的形式，实现对单个类的扩展

实现：

1.定义一个class, 使用implements关键字联合另外的若干个类。

2.为了让编译器知道mixin进来的类属性方法在运行时是可用的，要对mixin进来的属性方法创建出占位属性。

3.定义函数来实现混入操作，遍历所有的mixins类的属性，并复制到目标类。

class Eat {
  prepareEat() {
    console.log("prepareEat");
  }
}

class Run {
  runMeters: number;
  prepareRun() {
    this.runMeters = 100;
    console.log("prepareRun");
  }
}

class Dog implements Eat, Run {
  runMeters: number = 0;
  prepareEat(): void {}
  prepareRun(): void {
    // 这里的方法制作占位使用，里面的业务代码不会生效
    // this.runMeters = 1000;
  }

  shout(): void {
    console.log("shout");
  }
}

function mixinAnimal(target: any, mixins: any[]) {
  mixins.forEach((mixin) => {
    Object.getOwnPropertyNames(mixin.prototype).forEach((name) => {
      target.prototype[name] = mixin.prototype[name];
    });
  });
}

mixinAnimal(Dog, [Eat, Run]);

let DaHei = new Dog();
DaHei.prepareRun();
DaHei.prepareEat();
DaHei.shout();
console.log(DaHei.runMeters);