mixin pattern with TypeScript?

Question

I've read this article. https://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/

here is the original code of JavaScript from the article:

class MyClass extends mix(MyBaseClass).with(Mixin1, Mixin2) {
  /* ... */
}

let mix = (superclass) => new MixinBuilder(superclass);

class MixinBuilder {
  constructor(superclass) {
    this.superclass = superclass;
  }

  with(...mixins) { 
    return mixins.reduce((c, mixin) => mixin(c), this.superclass);
  }
}

I'm wondering how to create such a mixin utility helper in typescript so I can get the type hitting and static code analysis.

I've been tried hours... but couldn't finish it without using some any types, if I use any I miss all the type hints, which is not what I want.

Elias Schablowski · Accepted Answer · 2020-07-28 01:49:13Z

6

You can use chaining, since otherwise all Mixins would have to have the same return signature using generics:

interface Ctor<T = NonNullable<any>> {
    new(...params: any[]): T;
}

interface MixIn<Superclass extends Ctor, Extension extends Ctor> {
    (ctor: Superclass): Superclass & Extension;
}
function mix<T>(superclass: Ctor<T>) {
    return new MixinBuilder(superclass);
}

interface Mixed<T extends Ctor> {
    with<K extends Ctor>(mixin: MixIn<T, K>): Mixed<ReturnType<MixIn<T, K>>> & ReturnType<MixIn<T, K>>;
}

class MixinBuilder<T extends Ctor> {
    superclass: T;
    constructor(superclass: T) {
        console.log(superclass);
        this.superclass = superclass;
    }

    with<K extends Ctor>(mixin: MixIn<T, K>): Mixed<ReturnType<MixIn<T, K>>> & ReturnType<MixIn<T, K>>  {
        const mixed = mixin(this.superclass);
        return class extends mixed {
            static with<K extends Ctor>(mixin: MixIn<typeof mixed, K>) {
                return new MixinBuilder(mixed).with(mixin);
            }
        } as any;
    }
}

Playground

edited Jul 28, 2020 at 1:49

answered Jul 27, 2020 at 23:07

Elias Schablowski

2,84211 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Andrei Over a year ago

I believe you can add handle more than one argument in with but there will be a different signature required for different params quantity, as many popular libraries do

Elias Schablowski Over a year ago

I know, but since that requires a lot of signatures, I find it easier to just have chaining (since it doesn't add much bloat on the user) - Especially for StackOverflow where some people copy/paste without reading and wonder why it fails at 10+ parameters

yaquawa Over a year ago

Wow,nice work!!!!!! The only pity thing is that you have to manually specify the interface of the returned mixin class. Is there any better solution so the compiler can infer the mixin's interface by itself ?

yaquawa Over a year ago

Thanks man! Actually, I just found that it can not be chained! how sad..

Elias Schablowski Over a year ago

@yaquawa, I fixed the chainability (I forgot the intersection for the Mixed interface)

|

Collectives™ on Stack Overflow

mixin pattern with TypeScript?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related