How to work with the mixins helper function in vue-class-compoment?

[zhiquan-yu]

vue-class-component: using mixins

[djkloop]

same problem

[djkloop]

@zhiquan-yu Have you solved it, please?

[zhiquan-yu]

@djkloop Because we are using JSX, maybe we should use HOC like React instead of mixin.

Reference: https://github.com/MeetehS/vue-class-ts/blob/master/docs/mixins.md

[wonderful-panda]

Currently not supported.

We must specify types manually.

import Vue from "vue";
import Component, { mixins } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import * as tsx from "vue-tsx-support";

interface MyMixinProps {
  foo: string;
}

@Component
class MyMixin extends Vue {
  @Prop
  foo!: string;
}

@Component
class MyComp extends mixins(MyMixin) {
  @Prop
  bar!: string;
}

const TypedMyComp = tsx.ofType<{ bar: string } & MyMixinProps>().convert(MyComp);

[djkloop]

@wonderful-panda In the future, there will be related apis in this area... I feel this @Mixins Api is very practical...

[LolliDepp]

I managed to use something like

MyComponent extends mixins<MyMixin, Props, Events, Slots>(MyMixin) {}

By overriding the declarations of mixins from vue-class-component. I’m considering opening a PR but I would need to add vue-class-component as a peerDependency I think... @wonderful-panda do you think this could be done? Or would you prefer if I maybe added the solution somewhere in the docs?

I managed to fix by adding this vue-class-component-extender.d.ts file:

import Vue from 'vue';
import * as tsx from 'vue-tsx-support';

declare module 'vue-class-component' {
  type VueClass<V, b = {}, c = {}, d = {}> = {
    new (...args: any[]): V & tsx.Component<b, c, d>;
  } & typeof Vue;

  function mixins<A, Props, EventsWithOn = {}, ScopedSlotArgs = {}>(
    CtorA: VueClass<A>
  ): VueClass<A, Props, EventsWithOn, ScopedSlotArgs>;
  function mixins<A, B, Props, EventsWithOn = {}, ScopedSlotArgs = {}>(
    CtorA: VueClass<A>,
    CtorB: VueClass<B>
  ): VueClass<A & B, Props, EventsWithOn, ScopedSlotArgs>;
  function mixins<A, B, C, Props, EventsWithOn = {}, ScopedSlotArgs = {}>(
    CtorA: VueClass<A>,
    CtorB: VueClass<B>,
    CtorC: VueClass<C>
  ): VueClass<A & B & C, Props, EventsWithOn, ScopedSlotArgs>;
  function mixins<A, B, C, D, Props, EventsWithOn = {}, ScopedSlotArgs = {}>(
    CtorA: VueClass<A>,
    CtorB: VueClass<B>,
    CtorC: VueClass<C>,
    CtorD: VueClass<D>
  ): VueClass<A & B & C & D, Props, EventsWithOn, ScopedSlotArgs>;
  function mixins<A, B, C, D, E, Props, EventsWithOn = {}, ScopedSlotArgs = {}>(
    CtorA: VueClass<A>,
    CtorB: VueClass<B>,
    CtorC: VueClass<C>,
    CtorD: VueClass<D>,
    CtorE: VueClass<E>
  ): VueClass<A & B & C & D & E, Props, EventsWithOn, ScopedSlotArgs>;
  function mixins<T, Props, EventsWithOn = {}, ScopedSlotArgs = {}>(
    ...Ctors: VueClass<Vue>[]
  ): VueClass<T, Props, EventsWithOn, ScopedSlotArgs>;
}