type of useTemplateRef on generic components only contains exposed functions

[markbrockhoff]

Vue - Official extension or vue-tsc version

2.2.0

VSCode version

1.96.2

Vue version

3.5.13

TypeScript version

5.7.3

System Info

No response

package.json dependencies

No response

Steps to reproduce

Hi, I noticed that the type of a template ref created on a generic component is different from normal components. I have a specific usecase where I need to access the underlying component of the template ref using $el on it. This works as expected for all components except if the component is generic. In this case the type of the template ref will only contain the functions exposed from the component using defineExpose.

I created a reproduction inside a newly created vue app: https://github.com/markbrockhoff/vue-bug-repros/blob/main/src/App.vue

Steps to reproduce:

1. Clone the repo
2. Install the dependencies (pnpm i)
3. Run pnpm type-check to see the TS error when trying to access $el on the template ref
4. Make the component components/Example.vue not generic by removing generic="T" from its script tag
5. Run pnpm type-check again and see that the types are now as expected

What is expected?

I'd expect that the type for a template ref created on a generic component behaves the same was as when creating one. It should at least be of type HtmlElement & ExposedFunctions instead of just ExposedFunctions.

What is actually happening?

Only the functions exposed from the generic component using defineExpose are present inside the type of the template ref.

Link to minimal reproduction

https://github.com/markbrockhoff/vue-bug-repros/blob/main/src/App.vue

Any additional comments?

No response

[KazariEX]

Since generic components need to be treated as function components in terms of their types, they cannot be processed with defineComponent. It is currently challenging to access the properties and their types on ComponentPublicInstance.

[markbrockhoff]

Thanks for the quick response, for anyone else running into this issue: For now I'm manually typing my template ref like this as workaround:

const templateRef = useTemplateRef<ComponentPublicInstance<typeof ComponentName> & ComponentExposed<typeof ComponentName>>("refName");

Where ComponentExposed is imported from vue-component-type-helpers

Would be great if we managed to improve the type support for generic components to be the same as normal components :)