vuejs
Infer component type with `defineAsyncComponent` and `generic`
Vue version
latest
Link to minimal reproduction
Steps to reproduce
What is expected?
Foo type should be inferred correct in file foo1.vue like foo2.vue.
What is actually happening?
System Info
Any additional comments?
No response
In Foo2.vue, A and B are imported synchronously, and TypeScript can perform type inference correctly. However, in Foo1.vue, the asynchronous component returned by defineAsyncComponent seems to have a different type from ordinary components, so TypeScript cannot infer the type correctly. In _Foo, InstanceType extracts a class, but what is returned inside is a component object, so an error is reported. Using type assertion can enable correct inference.like this:Playground or:
type newComponent<T = any> = Component<{
data: T
}> & {
__asyncResolved?: true
}
const AsyncA = defineAsyncComponent(() => import('./A.vue')) as newComponent<{bar: number}>
But this is just equivalent to me knowing that this is an asynchronous component, but still using it like an ordinary component. Further, perhaps we need to make the two share the same set of type definitions to eliminate the differences.
