如何用泛型实现基于ts-mixer的抽象类动态Mixin扩展？

1. 定义基础抽象类 #

先明确核心的基础抽象类与需要混入的抽象类：

abstract class BaseButton {
  abstract render(): void;
}

abstract class FixedMixinA {
  abstract executeLogicA(): void;
}

abstract class DynamicMixinB {
  abstract executeLogicB(): void;
}

abstract class DynamicMixinC {
  abstract executeLogicC(): void;
}

2. 创建泛型抽象基类生成器 #

利用ts-mixer的Mixin函数，封装工厂函数生成固定混入FixedMixinA、动态传入其他抽象类的抽象基类，解决工厂函数无法返回抽象类的类型问题：

import { Mixin } from 'ts-mixer';

// 定义抽象构造函数类型，约束传入的动态混入类必须是抽象类
type AbstractConstructor<T = {}> = abstract new (...args: any[]) => T;

function createExtendedButton<Dynamic extends AbstractConstructor>(
  dynamicMixin: Dynamic
): AbstractConstructor<BaseButton & FixedMixinA & InstanceType<Dynamic>> {
  // 生成混合后的抽象类
  abstract class ExtendedButton extends Mixin(BaseButton, FixedMixinA, dynamicMixin) {}
  // 类型断言为抽象构造函数，修正ts-mixer默认返回的普通构造函数类型
  return ExtendedButton as unknown as AbstractConstructor<BaseButton & FixedMixinA & InstanceType<Dynamic>>;
}

3. 简化最终类实现 #

无需手动创建ExtendedButtonA这类中间类，直接通过生成的抽象基类实现最终类：

// 生成混入FixedMixinA和DynamicMixinB的抽象基类
const ExtendedButtonWithB = createExtendedButton(DynamicMixinB);

class FinalButtonB extends ExtendedButtonWithB {
  render(): void {
    console.log('渲染按钮');
  }

  executeLogicA(): void {
    console.log('实现固定混入类A的逻辑');
  }

  executeLogicB(): void {
    console.log('实现动态混入类B的逻辑');
  }
}

// 同理生成混入FixedMixinA和DynamicMixinC的抽象基类
const ExtendedButtonWithC = createExtendedButton(DynamicMixinC);

class FinalButtonC extends ExtendedButtonWithC {
  render(): void {
    console.log('渲染特殊按钮');
  }

  executeLogicA(): void {
    console.log('实现固定混入类A的逻辑');
  }

  executeLogicC(): void {
    console.log('实现动态混入类C的逻辑');
  }
}

4. 类式泛型写法的替代方案 #

如果偏好class FinalButton extends ExtendedButton<DynamicMixinB>{}这类语法，可通过泛型抽象类结合类型约束实现：

// 定义泛型类型，组合所有混入的接口
type ExtendedButtonInterface<Dynamic> = BaseButton & FixedMixinA & Dynamic;

// 泛型抽象类，约束子类必须实现所有混入类的抽象方法
abstract class ExtendedButton<Dynamic> implements ExtendedButtonInterface<Dynamic> {
  abstract render(): void;
  abstract executeLogicA(): void;
  // 用索引签名兼容动态混入类的抽象方法，避免类型报错
  abstract [key: string]: any;
}

// 继承时通过Mixin组合泛型抽象类与动态混入类
class FinalButtonB extends Mixin(ExtendedButton<DynamicMixinB>, DynamicMixinB) {
  render(): void {
    console.log('渲染按钮');
  }

  executeLogicA(): void {
    console.log('实现固定混入类A的逻辑');
  }

  executeLogicB(): void {
    console.log('实现动态混入类B的逻辑');
  }
}

关键注意点 #

• 必须用AbstractConstructor约束动态混入类，确保传入的是抽象类而非普通类
• 工厂函数返回时的类型断言是必要的，因为ts-mixer默认返回普通构造函数类型，无法识别抽象类特性
• 类式泛型写法中，索引签名用于兼容动态混入类的抽象方法，避免TypeScript类型检查报错

内容的提问来源于stack exchange，提问作者Patrick Visi