只做水果的网站信息流推广渠道

在 通过 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博客