Skip to content

Mixin type definitions not quite there (yet) #452

Closed
@jenglish404

Description

@jenglish404

This is similar to #435. As others have reported, this was okay with vue-class-component v7.2.3, but unhappy with v7.2.5. Here's a minimal self-contained reproduction of the issue.

Using a typed Mixins declaration like:

@Component
export default class HelloWorld extends Mixins<AnimalMixin<Cat>>(
  AnimalMixin,
  UtilsMixin
) {
  ...
}

...results in the following TypeScript error:

ERROR in /src/components/HelloWorld.vue(40,48):
40:48 Type 'AnimalMixin<Cat>' does not satisfy the constraint 'VueClass<Vue>[]'.
  Type 'AnimalMixin<Cat>' is missing the following properties from type 'VueClass<Vue>[]': length, pop, push, concat, and 28 more.
    38 |
    39 | @Component
  > 40 | export default class HelloWorld extends Mixins<AnimalMixin<Cat>>(
       |                                                ^
    41 |   AnimalMixin,
    42 |   UtilsMixin
    43 | ) {
Version: typescript 4.0.2

If you're not including multiple Mixins, it's okay:

@Component
export default class HelloWorld extends Mixins<AnimalMixin<Cat>>(
  AnimalMixin
) {
  ...
}

If you're not using a typed Mixin declaration, it's okay:

@Component
export default class HelloWorld extends Mixins(
  SomeOtherMixin,
  UtilsMixin
) {
  ...
}

It's the combination of the two that appears to cause the issue.

If I make the following change in node_modules\vue-class-component\lib\util.d.ts:

...
export declare type MixedVueClass<Mixins extends VueClass<Vue>[]> = Mixins extends (infer T)[] ? VueClass<UnionToIntersection<ExtractInstance<T>>> : never;
export declare function mixins<A>(CtorA: VueClass<A>): VueClass<A>;
export declare function mixins<A, B>(CtorA: VueClass<A>, CtorB: VueClass<B>): VueClass<A & B>;
export declare function mixins<A, B, C>(CtorA: VueClass<A>, CtorB: VueClass<B>, CtorC: VueClass<C>): VueClass<A & B & C>;
export declare function mixins<A, B, C, D>(CtorA: VueClass<A>, CtorB: VueClass<B>, CtorC: VueClass<C>, CtorD: VueClass<D>): VueClass<A & B & C & D>;
export declare function mixins<A, B, C, D, E>(CtorA: VueClass<A>, CtorB: VueClass<B>, CtorC: VueClass<C>, CtorD: VueClass<D>, CtorE: VueClass<E>): VueClass<A & B & C & D & E>;
// Add this line
export declare function mixins<T>(...Ctors: VueClass<Vue>[]): VueClass<T>;
export declare function mixins<T extends VueClass<Vue>[]>(...Ctors: T): MixedVueClass<T>;
export declare function isPrimitive(value: any): boolean;
export declare function warn(message: string): void;

...then TypeScript is happy. It looks like pull request #436 (make mixins declaration backward compatible) restored some of the above, but not everything that was there in v7.2.3.

Would it be possible to add that line back in the next release?

Our workaround for now is to continue using v7.2.3.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions