當我們在 Vue 項目里獲取組件的實例時，一般都是在 <template> 模板直接 ref="your name"，這種方式實際也是調用 document.getElementXXX ，但是在 TS 語言下有一個問題，我們該如何定義這個類型，一般情況下開發工具無法正確提示該組件的方法，但是我們可以通過正確的類型標注來輔助 TS 進行類型推斷。

子組件 CheckBox.vue

<script setup lang="ts">
import cbChecked from '~/assets/images/cb-checked.png'
import cbUnchecked from '~/assets/images/cb-unchecked.png'
const props = withDefaults(
  defineProps<{
    isChecked?: boolean
  }>(),
  {
    isChecked: false,
  },
)
const emits = defineEmits(['update:isChecked'])
const localStatus = useVModel(props, 'isChecked', emits)
const println = (msg: string) => {
  console.log(`父組件調用 msg=${msg}`)
}
function printlnTest() {
  console.log('父組件調用 printlnTest')
}
defineExpose({
  printlnTest,
  println,
})
</script>

<template>
  <img
    class="w-0.48rem h-0.48rem"
    :aria-checked="localStatus"
    :src="localStatus ? cbChecked : cbUnchecked"
    alt="checkbox" @click="localStatus = !localStatus"
  >
</template>

父組件

import CheckBox from '@/xxx/components/CheckBox.vue'
import type CheckBoxType from '@/xxx/components/CheckBox.vue'
const checkbox = ref<InstanceType<typeof CheckBoxType> | null>()
<template>
  <CheckBox
   ref="checkbox"
   v-model:is-checked="introducePage.checkBoxStatus"
   />
</template>

這個時候，當我們輸入checkbox.value?. 時，編譯器就會自動提示可以調用 defineExpose 公開的函數了。

image.png

最后解釋一下代碼邏輯， typeof 是獲取該組件的類型，但是光靠這個關鍵字無法獲取到組件內部的方法的，因為這是基于模板創建的類型而不是組件實例的類型，所以你得通過 InstanceType 來獲取。