feat(types): add type TemplateRef (#12645)

* feat(types): add type TemplateRef

* chore: simplify

Co-authored-by: jh-leong <jh.leong@outlook.com>

---------

Co-authored-by: jh-leong <jh.leong@outlook.com>

packages-private/dts-test/ref.test-d.ts

@@ -4,6 +4,7 @@ import {
   type MaybeRefOrGetter,
   type Ref,
   type ShallowRef,
+  type TemplateRef,
   type ToRefs,
   type WritableComputedRef,
   computed,
@@ -535,7 +536,7 @@ expectType<string>(toValue(unref2))
 
 // useTemplateRef
 const tRef = useTemplateRef('foo')
-expectType<Readonly<ShallowRef<unknown>>>(tRef)
+expectType<TemplateRef>(tRef)
 
 const tRef2 = useTemplateRef<HTMLElement>('bar')
-expectType<Readonly<ShallowRef<HTMLElement | null>>>(tRef2)
+expectType<TemplateRef<HTMLElement>>(tRef2)

packages/runtime-core/src/helpers/useTemplateRef.ts

@@ -5,9 +5,11 @@ import { EMPTY_OBJ } from '@vue/shared'
 
 export const knownTemplateRefs: WeakSet<ShallowRef> = new WeakSet()
 
+export type TemplateRef<T = unknown> = Readonly<ShallowRef<T | null>>
+
 export function useTemplateRef<T = unknown, Keys extends string = string>(
   key: Keys,
-): Readonly<ShallowRef<T | null>> {
+): TemplateRef<T> {
   const i = getCurrentInstance()
   const r = shallowRef(null)
   if (i) {

packages/runtime-core/src/index.ts

@@ -64,7 +64,7 @@ export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
 export { useAttrs, useSlots } from './apiSetupHelpers'
 export { useModel } from './helpers/useModel'
-export { useTemplateRef } from './helpers/useTemplateRef'
+export { useTemplateRef, type TemplateRef } from './helpers/useTemplateRef'
 export { useId } from './helpers/useId'
 export {
   hydrateOnIdle,