开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情
模板引用的标注类型
用过模板引用的朋友应该知道，想要通过组合API的形式获得，必须要要声明一个同名的ref：
<script setup>
import { ref, onMounted } from 'vue'
// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)
onMounted(() => {
input.value.focus()
})
</script>
<template>
<input ref="input" />
</template>
而想要在TS中正确应用的话，则必须要显示声明泛型参数和一个初始值为null的类型：
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const el = ref<HTMLInputElement | null>(null)
onMounted(() => {
el.value?.focus()
})
</script>
<template>
<input ref="el" />
</template>
因为在组件在挂载之前和卸载后的ref都是null，所以要声明和 null 的联合类型，相应的在访问的时候也要通过可选链或者类型守卫的形式。
组件模板引用的标注类型
而还有一种很常见的场景是，我们需要为一个组件添加模板引用，并调用它暴露出的方法。就拿最常见的模态框组件来说吧，你想通过它暴露出的方法来打开它：
<!-- selfModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const isShow = ref(false)
const handleOpen = () => (isShow.value = true)
defineExpose({
handleOpen
})
</script>
当我们想要获得该组件的模板引用时，首先要通过typeof 得到其的类型，并且使用TypeScript其内置的InstanceType工具类型来获取该组件的类型实例：
<!-- App.vue -->
<script setup lang="ts">
import selfModal from './selfModal.vue'
const selfModal = ref<InstanceType<typeof selfModal> | null>(null)
const openModal = () => {
selfModal.value?.open()
}
</script>
同样的你也要声明一个和null的联合类型的泛型参数，并在访问的时候通过可选链或者类型守卫的形式。
还有一点要注意的是，该种方法只适用于Vue SFC中使用。
好，今天就到这里了。Bye！！！
