feature request: support for mixins composed from other mixins.

[trusktr]

Search Terms

Suggestion

At the moment, it seems to be very difficult to compose mixins from other mixins.

Here's an example on StackOverflow: https://stackoverflow.com/questions/56680049

Here's an example on playground.

The code:

type Constructor<T = any, A extends any[] = any[]> = new (...a: A) => T

function FooMixin<T extends Constructor>(Base: T) { 
    return class Foo extends Base { 
        foo = 'foo'
    }
}

function BarMixin<T extends Constructor>(Base: T) { 
    return class Bar extends FooMixin(Base) { 
        test() { 
            console.log(this.foo) //  PROBLEM: this.foo is 'any' =(
        }
    }
}

Use Cases

To make it simpler to make mixins (and compose them) like we can in plain JavaScript.

I'm porting JavaScript code to TypeScript, and the JavaScript makes great use of mixins (including composing new mixins from other mixins), but the composition ispractically impossible to do in TypeScript without very tedious type casting.

Examples

Here is the plain JS version of the above example:

function FooMixin(Base) { 
    return class Foo extends Base { 
        foo = 'foo'
    }
}

function BarMixin(Base) { 
    // BarMixin is composed with FooMixin
    return class Bar extends FooMixin(Base) { 
        test() { 
            console.log(this.foo) // this.foo is obviously inherited from FooMixin!
                           // ^--- This shoud not be an error!
        }
    }
}

It seems to me, that the type checker can realize that the class returned from FooMixin(Base) will be a typeof Foo. The type system could at least be able to allow the Bar class to use methods and properties from Foo, despite not knowing what the Base class will be.

You can also imagine this problem gets worse with more composition, f.e.

    return class Bar extends Foo(Baz(Lorem(Ipsum(Base)))) {

It should also be possible to constrain the constructor to inherit from a certain base class. For example, the following doesn't work:

(EDIT: this part may actually be moved to a separate issue)
(EDIT 2: this part seems to be resolved)

// Think about Custom Elements here:
function FooMixin<T extends typeof HTMLElement>(Base: T) { 
    return class Foo extends Base { 
        test() {
            this.setAttribute('foo', 'bar')
        }
    }
}

playground link

As @dragomirtitian pointed out on SO, there are workarounds, but they appear to be very complicated and impractical.

Here's a more realistic example of what I'm doing in JS (and trying to port to TS): I'm using a Mixin() helper function, as a type declaration for the following example, which in practice implements things like Symbol.hasInstance to check if instances are instanceof a given mixin, prevents duplicate mixin applications, and other features, but the types don't work:

type Constructor<T = any, A extends any[] = any[]> = new (...a: A) => T

type MixinFunction = <TSuper>(baseClass: Constructor<TSuper>) => Constructor<TSuper>

// this function does awesome: ensures mixins aren't applied
// more than once on a prototype chain, sets up Symbol.hasInstance so that
// instanceof checks works with any mixin application, etc.
declare function Mixin<T extends MixinFunction>(
    mixinFn: T,
    DefaultBase?: Constructor
): ReturnType<T> & {mixin: T}

function FooMixin<T extends Constructor>(Base: T) { 
    return class Foo extends Base { 
        foo = 'foo'
    }
}

const Foo = Mixin(FooMixin)
type Foo = typeof Foo


function BarMixin<T extends Constructor>(Base: T) { 
    return class Bar extends Foo.mixin(Base) {
        bar = 'bar'

        test() {
            this.foo = 'foofoo' // should work!
        }
    }
}

const Bar = Mixin(BarMixin)

class Baz extends Bar {

    test() {
        this.bar = 'barbar' // should work!
        this.foo = 'foofoo' // should work!
    }

}

const f: Foo = new Bar()

playground link

Is there a way to do this currently, that we may have missed? (cc: @justinfagnani)

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[sandersn]

@trusktr For your first example, you just need a couple of type annotations to get rid of errors:

type Ctor<T> = { new(): T }
function FooMixin(Base: Ctor<{}>) {
    return class Foo extends Base {
        foo = 'foo'
    }
}
function BarMixin(Base: Ctor<{}>) {
    return class Bar extends FooMixin(Base) {
        test() {
            console.log(this.foo) // this.foo is obviously inherited from FooMixin!
                           // ^--- This shoud not be an error!
        }
    }
}

For your second example, you can't use typeof HTMLElement directly because its constructor is too restrictive to fit Typescript's mixin pattern. But you can just create a similar type, which typeof HTMLElement happens to be assignable to:

function FooMixin<T extends new (...args:any[]) => HTMLElement>(Base: T) {
    return class Foo extends Base {
        foo = 'foo'
        test() {
            this.setAttribute('foo', 'bar')
        }
    }
}

I haven't read your full example or @dragomirtitian's suggested workaround on SO. Let me do that now.

[trusktr]

I don't quite understand. Why does your first example work, and mine (with the Constructor type, doesn't? It's not immediately clear. Seems as if I'm specifying basically the same thing.

[trusktr]

How come when I change your example from

type Ctor<T> = { new(): T }
function FooMixin(Base: Ctor<{}>) {
    return class Foo extends Base {
        foo = 'foo'
    }
}

to

type Ctor<T> = { new(): T }
function FooMixin<T extends Ctor<{}>>(Base: T) {
    return class Foo extends Base { // ERROR, Type 'T' is not a constructor function type.
        foo = 'foo'
    }
}

it no longer works?

[sandersn]

There's a hard-coded requirement the mixin's type must be an object type, which Ctor<{}> is, but T extends Ctor<{}> is not -- it's a type parameter.

Using Ctor<{}> directly may be enough for you; T extends Ctor<{}> is treated like Ctor<{}> inside FooMixin, and when you call FooMixin, anything assignable to T extends Ctor<{}> is also assignable to Ctor<{}>.

The only reason you'd need a type parameter is to make other parameters of FooMixin use type T. For example, if you wanted to mixin two things, you could make those two have the exact same type: function FooMixin<T extends Ctor<{}>>(Base1: T, Base2: T). That's weird! Although, there might be more believable examples.

[trusktr]

@sandersn I tried your recommendation with the HTMLElement, but seems I can't do it with a default arg. For example:

type Constructor<T = any, A extends any[] = any[]> = new (...a: A) => T

function WithUpdateMixin<T extends Constructor<HTMLElement>>(Base: T = HTMLElement) {

but with the = HTMLElement default arg it says:

Type '{ new (): HTMLElement; prototype: HTMLElement; }' is not assignable to type 'T'.
  '{ new (): HTMLElement; prototype: HTMLElement; }' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'Constructor<HTMLElement, any[]>'. 
ts(2322)

It doesn't make sense to me. How does HTMLElement not fit the constraint?

[trusktr]

Here's another example of better support needed for mixins. In my previous comment, WithUpdateMixin is for Web Components. At minimum, the Base needs to be one of the builtin element classes like HTMLElement, HTMLDivElement, etc.

But the Base class could also be a Custom Element that extends from one of those builtin classes.

So in my code (converting from JavaScript), I have the following conditional, in case the Base class has an attributeChangedCallback method (if it is a Custom Element):

            if (super.attributeChangedCallback) {
                super.attributeChangedCallback(name, oldValue, newValue)
            }

but TypeScript gives the error:

Property 'attributeChangedCallback' does not exist on type 'HTMLElement'. ts(2339)

Obviously it doesn't exist on HTMLElement.

I also tried

(super as any).attributeChangedCallback

but it is invalid syntax for TS.

Same problem with

            if (super.connectedCallback) {
                super.connectedCallback()
            }

etc.

I also tried putting this: any in the method signature which has the above conditionals, but no luck.

How can we make this work?

[trusktr]

Alright, I'm trying to work around the problem by forcing a cast, but it isn't making sense. I'm trying:

type PossibleCustomElement<T = HTMLElement> = T & {
    connectedCallback?(): void
    disconnectedCallback?(): void
    adoptedCallback?(): void
    attributeChangedCallback?(name: string, oldVal: string | null, newVal: string | null): void
}

function WithUpdateMixin<T extends Constructor<HTMLElement>>(Base: T = HTMLElement as any) {
    return class WithUpdate extends (Base as PossibleCustomElement<T>) {
                                               // ^--- HERE

and it says

Type 'PossibleCustomElement<T>' is not a constructor function type. ts(2507)

Clearly T is constrained to T extends Constructor<HTMLElement>, so it seems that therefore it is a constructor and I shouldn't get a type error.

Is this simply beyond what is implemented in TypeScript? Does TypeScript need a new feature here?

EDIT: Okay, I see PossibleCustomElement is the instance type. So I got a little closer, but no cigar:

type PossibleCustomElement<T extends HTMLElement> = T & {
    connectedCallback?(): void
    disconnectedCallback?(): void
    adoptedCallback?(): void
    attributeChangedCallback?(name: string, oldVal: string | null, newVal: string | null): void
}

type PossibleCustomElementConstructor<T extends HTMLElement> = Constructor<PossibleCustomElement<T>>

function WithUpdateMixin<T extends Constructor<HTMLElement>>(Base: T = HTMLElement as any) {
    return class WithUpdate extends ((Base as unknown) as PossibleCustomElementConstructor<T>) {

and now the error is:

Base constructor return type 'PossibleCustomElement<T>' is not an object type or intersection of object types with statically known members.ts(2509)

So now my question seems to be valid: Should it be able to understand that an instance of PossibleCustomElementConstructor<T> (which is constrained to extend from the HTMLElement constructor) should at least have the methods and properties from from HTMLElement and PossibleCustomElement?

[trusktr]

Ah! I figured it out.

The problem was: I was intuitively thinking that the constraint T extends Constructor<HTMLElement> would make ((Base as unknown) as PossibleCustomElementConstructor<T>) in my previous comment work, because I had assumed the type system would understand the constraint and implicitly limit the application of PossibleCustomElementConstructor<T> to PossibleCustomElementConstructor<HTMLElement>. Turns out, I was being too smart for the type system! 🤓 (Maybe this is a new feature request then).

So, I figured out that if I explicitly specify the constrained type, instead of intuitively passing T along, then it works, like follows:

type PossibleCustomElement<T extends HTMLElement> = T & {
    connectedCallback?(): void
    disconnectedCallback?(): void
    adoptedCallback?(): void
    attributeChangedCallback?(name: string, oldVal: string | null, newVal: string | null): void
}

type PossibleCustomElementConstructor<T extends HTMLElement> = Constructor<PossibleCustomElement<T>>
type HTMLElementConstructor = Constructor<HTMLElement>

function WithUpdateMixin<T extends HTMLElementConstructor>(Base: T = HTMLElement as any) {
    return class WithUpdate extends ((Base as unknown) as PossibleCustomElementConstructor<HTMLElement>) {

        connectedCallback() {
            if (super.connectedCallback) {  // ----- IT WORKS!
                super.connectedCallback()
            }

            // ...
        }

        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
            if (super.attributeChangedCallback) { // ----- IT WORKS!
                super.attributeChangedCallback(name, oldValue, newValue)
            }

            // ...
        }
    }
}

And now that makes sense: I know that the type is at least HTMLElement, so if I explicitly state that in the extends part of the mixin class, then I know that's what I will at least get (as far as types that I can use inside of the WithUpdate class.

I think it would make sense for TypeScript to infer what I was trying to do by passing T along, instead of having to specify HTMLElement in more than one place; it would make things more DRY.

But I still don't like the as unknown cast; I feel like that shouldn't be there. (Although the combination of the words "unknown" and "PossiblyCustomElement" ironically fit together because we don't know what Base will be exactly).

[trusktr]

Now I need to figure out if the main thing in the original post is possible: making mixins composed of mixins...

The issue I forsee is that WithUpdate could be mixed with other mixins that don't necessarily extend from HTMLElement, so that later the composed mixin could finally be mixed with a subclass that does extend HTMLElement.

[trusktr]

Thanks for your hints about T extends Ctor<{}>. That helped a lot. I've gotten my mixins working (after many permutations of tinkering to understand how the type checker works), however it still requires a cast because the base class "is not a constructor function type". I found it easier to write my own Constructor helper, with default T = object, which is what I need in most cases.

Basically, here's what a simplified version looks like:

type Constructor<T = object, A extends any[] = any[]> = new (...a: A) => T

function FooMixin<T extends Constructor>(Base: T) { 

    class Foo extends Base { 
        foo = 'foo'
    }

    return Foo as typeof Foo & T
}

function BarMixin<T extends Constructor>(Base: T) { 

    class Bar extends FooMixin(Base as unknown as Constructor) { 
        test() { 
            console.log(this.foo)
        }
    }

    return Bar as typeof Bar & T

}

playground

The as Constructor cast doesn't seem intuitive, but needed when using T in order to return the mixin type combined with the passed-in constructor type.

[RyanCavanaugh]

@trusktr What further action is required here in your judgment?