-
-
Notifications
You must be signed in to change notification settings - Fork 33.6k
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
Vue.component doesnt except argument of type Component
#8719
Comments
This is because Why do you use |
Because the function loads components via webpacks require.context. Also there is a EsModule type for async comps that hints against Component. There is also a Vue.component overload foreach member type of the Component union. I think that is just a problem of typescript not being able to check that correctly. |
Another indicator for this being a ts problem is that the following works: const comp: Component = {};
Vue.component('test', comp); |
well, |
ofc it is. that is not the point. but then TS somehow finds the correct // type Component = typeof Vue | ComponentOptions | FunctionalComponentOptions;
const first = {};
const firstComponent: Component = first;
Vue.component('first', first); // ok
Vue.component('firstComponent', firstComponent); // ok
const second = { functional: true };
const secondComponent: Component = second;
Vue.component('second', second); // ok
Vue.component('secondComponent', secondComponent); // ok
const third = Vue.extend({});
const thirdComponent: Component = third;
Vue.component('thrid', third); // ok
Vue.component('thirdComponent', thirdComponent); // ok
declare function getComponent(): Component;
const final: Component = getComponent();
Vue.component('final', final); // type error It is a typescript problem. TS seems like it doesnt allow multiple overloads to match (what the final case is requiring). |
here is a plain typescript example demonstrating the problem: interface A {
a: string;
}
interface B {
b: string;
}
interface C {
c: string;
}
type union = A | B | C;
declare function acceptsUnion(x: A): void;
declare function acceptsUnion(x: B): void;
declare function acceptsUnion(x: C): void;
declare function returnsUnion(): union;
acceptsUnion(returnsUnion()); // type error |
I see your use case. I'm not sure that union type sometimes passes overload but we can replace fallback overload of |
any update on this? i am using the following import Vue, { Component } from 'vue';
import { ExtendedVue } from 'vue/types/vue';
declare module 'vue/types/vue' {
interface VueConstructor<V extends Vue = Vue> {
component<Data, Methods, Computed, Props>(
id: string,
definition: Component<Data, Methods, Computed, Props>,
): ExtendedVue<V, Data, Methods, Computed, Props>;
}
} |
Version
2.5.17
Reproduction link
https://codesandbox.io/s/8z04jxj3y8
Steps to reproduce
What is expected?
I can pass any component to
Vue.component
What is actually happening?
Type error:
Adding the following overload to
Vue.component
will fix it:The text was updated successfully, but these errors were encountered: