Skip to content
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

ComponentInstance type doesn't include exposed methods of generic components #10077

Open
zomakus opened this issue Jan 11, 2024 · 3 comments
Open

Comments

@zomakus
Copy link

zomakus commented Jan 11, 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.

@zomakus
Copy link
Author

zomakus commented Jan 11, 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.

@pikax
Copy link
Member

pikax commented Jan 12, 2024

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

After #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.

@wangyige0701
Copy link

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.

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

No branches or pull requests

4 participants