Vue中如何正确引用HTMLElement用于DOM API？求非强制类型转换方案

除了使用as强制类型转换，你可以通过以下几种更安全的方式处理：

1. 精确指定类型并添加非空校验 #

将ref的类型指定为具体的HTML元素类型（比如HTMLDivElement），同时包含null或undefined，使用前通过条件判断确保元素存在：

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

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

const refs = ref<HTMLDivElement | null>(null);

onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 业务逻辑
        }
      });
    },
    { threshold: [0.4, 0.6] }
  );

  if (refs.value) {
    observer.observe(refs.value);
  }
});
</script>

TypeScript会在通过非空判断后自动认可refs.value的类型，无需强制转换。

2. 使用非空断言操作符 #

由于onMounted钩子在组件挂载后执行，此时DOM元素一定已存在，你可以用非空断言!明确告诉TypeScript值非空：

observer.observe(refs.value!);

这种方式简洁，但仅适用于你能100%确定值不为空的场景。

3. 依赖Vue的自动类型推断 #

不手动指定ref类型，Vue会根据模板中的元素自动推断出正确的类型：

// Vue会自动推断为 Ref<HTMLDivElement | null>
const refs = ref(null);

之后同样通过非空判断或非空断言使用即可，这种方式更简洁，减少手动指定类型的出错概率。

内容的提问来源于stack exchange，提问作者李天赐