Description
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.