TypeScript中如何创建继承MixinA的MixinB？

现有代码 #

MixinA定义 #

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

export declare class MixknAInterface {
    // methods goes here
}

export const MixinA = <T extends Constructor<LitElement>>(superclass: T) => {
    class MixinAClass extends superclass {
        ...
    }
    return MixinAClass as unknown as Constructor<MixknAInterface> & T;
}

组件继承MixinA的写法 #

export class ClassA extends MixinA(LitElement) {...}

需求 #

创建MixinB，使其基于MixinA扩展，让组件ClassB继承MixinB后同时具备MixinA和MixinB的功能，示例调用如下：

export class ClassB extends MixinB.....

实现方案 #

MixinB的代码实现 #

如果需要类型约束，先定义MixinB的接口，再实现MixinB函数——内部先通过MixinA处理传入的父类，再基于这个扩展后的类添加MixinB的逻辑：

// 可选：定义MixinB的接口，用于类型提示
export declare class MixinBInterface {
    // 声明MixinB独有的方法或属性
    mixinBMethod(): void;
}

export const MixinB = <T extends Constructor<LitElement>>(superclass: T) => {
    // 先通过MixinA扩展传入的父类
    const ClassWithMixinA = MixinA(superclass);
    // 基于扩展后的类创建MixinB的实现类
    class MixinBClass extends ClassWithMixinA {
        // 添加MixinB的具体逻辑
        mixinBMethod() {
            console.log("MixinB 自定义方法执行");
        }

        // 可选：重写MixinA的方法扩展逻辑
        // mixinAMethod() {
        //     super.mixinAMethod();
        //     // 额外的自定义逻辑
        // }
    }
    // 返回合并了所有相关类型的构造函数，保证类型推断正确
    return MixinBClass as unknown as Constructor<MixknAInterface> & Constructor<MixinBInterface> & T;
}

ClassB的使用方式 #

export class ClassB extends MixinB(LitElement) {
    connectedCallback() {
        super.connectedCallback();
        // 可直接调用MixinA和MixinB的方法
        this.mixinAMethod(); // 假设MixinA中定义了该方法
        this.mixinBMethod();
    }
}

核心逻辑说明 #

Mixin本质是接收构造函数、返回扩展后构造函数的高阶函数。要让MixinB继承MixinA的能力，只需在MixinB内部先调用MixinA处理传入的父类，再基于这个已扩展的类添加MixinB自身的功能即可。类型声明部分合并所有相关接口与原父类类型，能确保TypeScript正确推断组件拥有的所有方法和属性。

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