useTemplateRef() with explicit generic argument
In cases where auto-inference is not possible, cast the template ref to an explicit type via the generic argument: const el = useTemplateRef<HTMLInputElement>('el')
advanced
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
useTemplateRef() with auto-inference (Vue 3.5+)
In Vue 3.5+ with @vue/language-tools 2.1+, the type of refs created by useTemplateRef() in SFCs can be automatically inferred for static refs based on the element or component the ref attribute is used on.
Template ref typing before Vue 3.5
Before Vue 3.5, template refs should be created with an explicit generic type argument and an initial value of null: const el = ref<HTMLInputElement | null>(null). This is necessary because the ref value is null until the component is mounted.
Optional chaining for template ref safety
For strict type safety when accessing template ref values, use optional chaining: el.value?.focus(). This is necessary because the ref value is null until mounted and can be set to null if the element is unmounted by v-if.
Component template ref with InstanceType
To get the instance type of an imported component for use with useTemplateRef(), use typeof combined with TypeScript's InstanceType utility: type FooType = InstanceType<typeof Foo> ... const compRef = useTemplateRef<FooType>('comp')
ComponentPublicInstance for generic component refs
When the exact component type is not available or not important, use ComponentPublicInstance instead: const child = useTemplateRef<ComponentPublicInstance>('child'). This includes only properties shared by all components, such as $el.
ComponentExposed for generic component template refs
For refs to generic components, use ComponentExposed from the 'vue-component-type-helpers' library, as InstanceType does not work with generic components: const modal = useTemplateRef<ComponentExposed<typeof MyGenericModal>>('modal')
Typing global custom directives
To get type hints and checking for global custom directives, extend the GlobalDirectives interface from 'vue'. First define a type for the directive (e.g., export type HighlightDirective = Directive<HTMLElement, string>), then declare it in the module: declare module 'vue' { export interface GlobalDirectives { vHighlight: HighlightDirective } }
Global directive registration with typing
Register a typed global directive using app.directive(): import highlight from './directives/highlight' ... app.directive('highlight', highlight). The directive name registered without 'v-' prefix corresponds to the v-prefixed name in templates (v-highlight).