vue3里面的组件实例类型（包括原生的html标签类型）

在 通过 ref（null）获取组件的时候，我们想要为 组件标注组件类型，可以通过 any 类型来进行标注，但是很明显，这些的代码很不优雅，所以我们可以利用 vue3 里面的 InstanceType 来进行类型标注

这是官网上面有关 InstanceType  的使用方法截图

但是上面的类型是自己定义的组件的，如果想给原生的 html 标签进行类型标注，我们该写什么类型呢，来看一下代码

<script setup lang="ts">
import { ref, Ref } from 'vue'


// HTMLHeadingElement 类型
const h1Instance: Ref<InstanceType<typeof HTMLHeadingElement> | null> =
  ref(null)

// HTMLDivElement 类型
const divInstance: Ref<InstanceType<typeof HTMLDivElement> | null> = ref(null)


const btnClick = () => {
  console.log(h1Instance.value, 'h1Instance.value')
  console.log(divInstance.value, 'divInstance.value')
}
	
</script>

<template>
  <h1 ref="h1Instance">h1标签</h1>
  <div ref="divInstance">div标签</div>
  <button @click="btnClick">测试按钮</button>
</template>

<style lang="less" scoped>
</style>

有关 HTMLHeadingElement 和 HTMLDivElement 类型是怎么来的，可以看这篇文章

如何查看HTML元素的TS类型_html tag ts-CSDN博客