Subscribe on changes!

ComponentInstance type doesn't include exposed methods of generic components

avatar
Jan 11th 2024

Vue version

3.4.8

Link to minimal reproduction

https://play.vuejs.org/#eNqNVc1u2zgQfhVCF9uALe0me1h4FW26ixRIG7RFm1uUgyKNHDYUKZCU68LRu3c41K+TFvXBNud/Pg6/OQZv6jrcNxBsg9jkmteWGbBNzUQmdxdpYE0aJKnkVa20ZUemoVwz+70G9r9CmQRpr6WxmcyBtazUqmILDLcYXD7qAjQUN9zYTh1GE5nLvfgnlWgvLegywzhOfm2hYsdUMvYE37dMNtUD6LU7i+wBxJYZq7ncpbJ1vrnCGpjo/Ay7cHXGfZy7+2R5d/SB/lz3ARY3SkO1aNfYFanORhWvTTNVnY+qQgmlF+39asyrxnY+Q9klfwFP7FBT5RSQocIkSZaTgBxF17KAQxfLd08mo8EbjDyaDJF8nLKRueVKMiXfclk4zXLl8Zz4hvtMNIAR5h148b/hDihkZ7wcqvJ6zIPYx5GfGpwRPKBFLTILeGIsJshYqTTOkXPeYCVwwHmiy6VDHJGRt+eybizbbypVgAh9050r5U0DmjwUeR2eeXESm0U+1kNjLbZ/mQueP6HNiAPmd3/jyJt4c9VYzJ0cjzNo2zaOOg1ZTWcZQXdhZ8Bh+q3zN6gZhtEJEckNDlJXK7tIKE2Iol5LMJzqSdj1FEcTcIN14J/Xpsrq8KtREt8v3S5GIAWm3fr7djJ8ZO6cBo/W1mYbRXkh0Q1h5nsdSrCRrKvoEs0i3UjLK9gUqro8D/8K/44K7GQqDsFUmwetvhnQGCQN6Fl2aSIU7kFvNCCC2t3R76U9cZumPlG9SO+y4yS2CIo1+D5KvjuBJMe3yAXoj7V7E3NoMiHUt3cks7qBoZf8EfKnV+RfDU6Z6+mTBqps0r/NNN6lV199+QAH/D8ocaob0V3DT5SfwSjRuBq92X+NLLDsiR1Ve003jOx3a64OFqTpm3KFEhpkT/fhaOhnrY/lnofnExRP6PlXq4HtQILmOR5v54vCYd5YKGZbgYjeU1itVe2IuoCSS/jkTrF/fWbLbu/u1xjavnfkS8SDspV7F5722XO/EZzVjafmV+zaGa12j7VfEX2FMWZLlkiP6EZVhVRFaLCRJQXFpeF+ziYmfVqvX4VC5ZkgtDMNy1dszlb4mVHzKb26737TrbAPbBLvn+ApOuousUlippj9wZ6fPYeyZCBwas3TcyhA7uxjR/oM+co2Wo4Ru/seFC8j3FH0+27FererQ60MLI8nxbMWW/vVKlCe4t1S4Mjw407AFmapHR96pvTXT9itaLScO2NI0TNcV8jSXehIcJ8tonRzxmx/AE4CFOs=

Steps to reproduce

  1. In the file App.vue, notice how TypeScript complains that the function getItemAtIndex (which is exposed by the generic component OrderedList.vue) doesn't exist in the component instance, which is typed using the ComponentInstance type added in Vue 3.4.

What is expected?

ComponentInstance type should include exposed component methods in type.

What is actually happening?

ComponentInstance type doesn't include exposed component methods in type when working with generic components, so TypeScript complains that there is an error when trying to access them.

System Info

No response

Any additional comments?

I'm aware that there is a type ComponentExposed in the package vue-component-type-helpers that allows typing generic component instances, but I think ComponenteInstance should also consider this use case when working with generics so that there is no need to rely on external packages.

avatar
Jan 11th 2024

I've been doing some more digging and the issue seems to be caused by the fact that typeof GenericComponent<TypeParameter> (in the case of the provided example, this would be typeof OrderedList<ListItem>) matches the following type condition used when defining ComponentInstance: T extends FunctionalComponent<infer Props, infer Emits>, which doesn't seem intended.

avatar
Jan 12th 2024

The issue seems to be caused by Vue/language-tools and ComponentInstance from vue.

After https://github.com/vuejs/core/pull/9556 lands into 3.5 I'll work on tweaking language tools to support the new helpers added. Currently the PR by itself won't be closing this issue.

avatar
Feb 2nd 2024

I also encountered this problem, to temporarily remove error, I use ref<Parameters<NonNullable<Parameters<typeof ScrollList>['2']>>['0'] | null>(null); replace ref<InstanceType<typeof ScrollList> | null>(null);

Although this looks a bit strange, but it can give me correct tip when I use generic in script.