TypeScript 类工厂 mixin 的结果“不是构造函数”

Question

我正在尝试在 TypeScript 中使用 mixin 类。但是 mixin 应用程序的返回值（以下代码中的 Sizeable.mixin()) 是“不是构造函数”，尽管正如您在错误输出中清楚地看到的那样，其类型的第一部分是 new (...args: any[]):，所以有人会认为它是一个构造函数：

知道为什么Parent（它显然是一个构造函数，因为它的类型中有{ new (...args: any[]): 部分）不允许被类扩展吗？

Answer 1

问题在于，mixin 将返回由 mixin 添加的内容与原始构造函数 T 的类型之间的交集。这在非泛型上下文中效果很好，并且生成的合并类将起作用。问题是，虽然在另一个 mixin 中，T 还不知道，所以交集 mxinStuff & T 将无法解析为构造函数：

function mixin1<T extends new (... a: any[]) => any> (ctor: T) {
    return class WithMixin1 extends ctor {
        mixin1() {}
    }
}

function mixinMixed<T extends new (... a: any[]) => any> (ctor: T) {
    return class WithMixin2 extends mixin1(ctor) { // Type '{ new (...a: any[]): mixin1<T>.WithMixin1; prototype: mixin1<any>.WithMixin1; } & T' is not a constructor function type.
        mixin2() {}
    }
}

我们可以对mixin1 的结果进行一些类型手术，以得到作为新类的基本类型，然后断言新类将生成，就好像我们扩展了我们最初想要的方式一样做扩展：

function mixin1<T extends new (... a: any[]) => any> (ctor: T) {
    return class WithMixin1 extends ctor {
        mixin1() {}
        static staticMixin1() {}
    }
}
const mixin1BaseType = () => mixin1(class{});    
type Mixin1Type = ReturnType<typeof mixin1BaseType>

function mixinMixed<T extends new (... a: any[]) => {a : string }> (ctor: T) {
    class WithMixin2 extends (mixin1(ctor) as unknown as {
        new (... a: any[]): {a : string } // we pretend this returns the constraint of T
    } & Mixin1Type /* add mixin back in but as instantiated for an empty class*/ ) {
        mixin2() {
            this.a
            this.mixin1()
            WithMixin2.staticMixin1();
        }
        static staticMixin2() {}
    }

    return WithMixin2 as unknown as {
        new (...a: ConstructorParameters<T>): WithMixin2 & InstanceType<T>
    } & T & Mixin1Type & typeof WithMixin2
}

type AnyContructor = new (... a: any[]) => any

let m = mixinMixed(class {
    a: string = "a";
    b: string = "b";
    m() {}
    static staticM() {}
})

let s  = new m();
// instance members are accessible
s.a
s.b
s.m();
s.mixin1();
s.mixin2();

// Staic methods are accessible
m.staticMixin1()
m.staticMixin2()
m.staticM();
console.log(s)

Answer 2

idk 为什么上面的答案如此复杂。你可以做InstanceType<typeof YourMixedType>。

基于TypeScript docs的示例

class Sprite {
  name = "";
  x = 0;
  y = 0;

  constructor(name: string) {
    this.name = name;
  }
}

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

// This mixin adds a scale property, with getters and setters
// for changing it with an encapsulated private property:

function Scale<TBase extends Constructor>(Base: TBase) {
  return class Scaling extends Base {
    // Mixins may not declare private/protected properties
    // however, you can use ES2020 private fields
    _scale = 1;

    setScale(scale: number) {
      this._scale = scale;
    }

    get scale(): number {
      return this._scale;
    }
  };
}

type Scalable = InstanceType<ReturnType<typeof Scale>>;

const EightBitSprite = Scale(Sprite);
type EightBitSpriteType = InstanceType<typeof EightBitSprite>;

const flappySprite = new EightBitSprite("Bird");

// Now lets use the types!
foo(flappySprite);
bar(flappySprite);
baz(flappySprite);

function foo(sprite: EightBitSpriteType) {
}
function bar(sprite: Scalable) {
}
function baz(sprite: Sprite) {
}

看到它在行动here。