Vue Tip: Typing Template Refs With TypeScript

Template refs only exist after the component is mounted. Thus, it’s necessary to type template refs with a union type that includes the DOM element type as well as null:

<template>  <textarea ref="textareaRef" /></template><script setup lang="ts">import { ref, onMounted } from 'vue'const textareaRef = ref<HTMLTextAreaElement | null>(null)onMounted(() => {  textareaRef.value?.focus()})</script>

The initial ref value is null until the component is mounted or if the v-if directive unmounts the element. Therefore, we use optional chaining to access textareaRef.value.