TypeScript: mix in plain object into class

Question

Basically I'm trying to create a function that dynamically defines class that extends another class from passed object. Something like this:

const ObjectMixin = function<T>(obj: T): new () => T {
    return class extends BaseClass {
        ...obj // pseudo code to convey the idea 
    }
}

Goal of this is to be able to write Vue class components with mapped state mixed in. Like this:

class MyComponent extends ObjectMixin(smartModule.mapState(['someState'])) {
    created() {
        this.someState // should not give any errors
    }
}

I almost got it working with hacks

interface ObjMixinI {
    <T>(obj: T): new () => T
}

const ObjectMixin: ObjMixinI = obj =>
//@ts-ignore
    function() {
        //@ts-ignore
        Object.assign(this, obj)
    }

But I can't make it extend Vue plus it's obviously a horrible solution.

please share reproducible example with smartModule

captain-yossarian from Ukraine
– captain-yossarian from Ukraine

2021-10-07 10:43:30 +00:00
Commented Oct 7, 2021 at 10:43 — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Oct 7, 2021 at 10:43
that's what I'm asking to help with....

Alex l.
– Alex l.

2021-10-07 11:45:25 +00:00
Commented Oct 7, 2021 at 11:45 — Alex l.
– Alex l., Commented Oct 7, 2021 at 11:45

brunnerh · Accepted Answer · 2021-10-07 13:32:38Z

0

You can probably use the constructor like this:

const ObjectMixin = function<T>(obj: T) {
    return class extends BaseClass {
        constructor() {
            super();

            Object.assign(this, obj);
        }
    } as { new (): BaseClass & T }
}

class X extends ObjectMixin({ test: 42 }) { }
const x = new X();
console.log(x.test);

answered Oct 7, 2021 at 13:32

brunnerh

188k30 gold badges362 silver badges434 bronze badges

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

Collectives™ on Stack Overflow

TypeScript: mix in plain object into class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related