Vue-class-component: Mixins lost the type information when type is generic.

[hesi726]

I used the vue-property-decorator, it seems export mixins as Mixins.
So i asked there.

@Component
export class MyMixin extends Vue { }

@Component
export class YourMixin<T> extends Vue {  name: T; }

/** the followed code will error;
export class GenericMixin extends Mixins(TheirYourMixin<string>, MyMixin) {  
  setName(name: string) {
    this.name = name;
  }
}
**/

/** so i must write a non generic type for Mixins **/
@Component
export class TheirMixin extends YourMixin<string> {} 

export class GenericMixin<T> extends Mixins(TheirMixin, MyMixin) {  
  setName(name: string) {
    this.name = name;
  }
}

Is there any way to mixins other vue class but reserve the generic parameter?

[ktsn]

Unfortunately, I think there is no way to specify it with mixins helper as the mixin constructors are passed as value.

If anyone come up with the idea to handle this, feel free to put it this thread 🙂

[garypippi]

In recent version, passing type information to mixin helper like this worked.

import Vue from 'vue'
import Component, { mixins } from 'vue-class-component'

@Component
class MyMixin extends mixins<GenericMixin<string>>(GenericMixin) {
    created() {
        console.log(this.value('hello'))
    }
}

@Component
class GenericMixin<T=any> extends Vue {
    value(value: T): T {
        return value
    }
}

[marco-quintella]

If think the only way to state the type you are expecting as @garypippi did. So the TS will surely know about what type it should expect since the generic parameter it's not the only one in the mixin types.

[liuyuan22]

In recent version, passing type information to mixin helper like this worked.

import Vue from 'vue'
import Component, { mixins } from 'vue-class-component'

@Component
class MyMixin extends mixins<GenericMixin<string>>(GenericMixin) {
    created() {
        console.log(this.value('hello'))
    }
}

@Component
class GenericMixin<T=any> extends Vue {
    value(value: T): T {
        return value
    }
}

thanks~

[ktsn]

Closing as the solution is provided. Thank you for making this discussion!