Skip to content

Mixin type definitions not quite there (yet) #452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jenglish404 opened this issue Sep 16, 2020 · 0 comments · Fixed by #454
Closed

Mixin type definitions not quite there (yet) #452

jenglish404 opened this issue Sep 16, 2020 · 0 comments · Fixed by #454
Labels

Comments

@jenglish404
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants