通过定义dom为Ref<HTMLElement>或其他的如:Ref<HTMLDivElement>,这样就可以使用ts内部相应的提示规则了,ts也能准确识别这个

但是后面的ref(null) as any 是关键,这个把ref内部默认写的Ref<null>给重置为any,再把any类型变成Ref<HTMLElement>类型。

<template>
  <div ref="dom">
  </div>
</template>

<script lang="ts">
import { Ref } from 'vue'
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  setup() {
    const dom: Ref<HTMLElement | null> = ref(null)
    onMounted(() => {
      if (dom.value) { // 因为dom可能为null,而null是没有HTMLElement的属性的,所以需要先判断一下dom.value是否等于null,避免为Null时执行dom方法
        const data = dom.value.getBoundingClientRect()
      }
    })
    return {
      dom
    }
  }
})
</script>