Mixin type definitions not quite there (yet) #452

jenglish404 · Sep 16, 2020

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.

ktsn added the bug label Sep 16, 2020

ktsn mentioned this issue Sep 17, 2020

fix: make mixins helper type compatible with previous usage #454

Merged

ktsn closed this in #454 Sep 17, 2020

Oct	NOV	Dec
	02
2019	2020	2021

vuejs / vue-class-component

Mixin type definitions not quite there (yet) #452

Mixin type definitions not quite there (yet) #452

jenglish404 commented Sep 16, 2020

vuejs / vue-class-component

Join GitHub today

Mixin type definitions not quite there (yet) #452

Mixin type definitions not quite there (yet) #452

Comments

jenglish404 commented Sep 16, 2020

Essential cookies

Always active

Analytics cookies