Vue中Option API转Composition API（函数与$refs）问题求助

以下是修正后的完整Composition API代码，同时针对你遇到的三个TypeScript错误逐一说明解决思路：

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

// 给ref指定具体DOM元素类型，明确类型边界
const toggler = ref<HTMLAnchorElement | null>(null);

onMounted(() => {
  // 先判断元素是否存在，避免null访问报错
  if (!toggler.value) return;

  toggler.value.onclick = function(event) {
    event.preventDefault();
    // 普通函数中this指向当前点击的DOM元素，和原Option API逻辑一致
    const target = this.closest('.card');
    const targetClass = 'card-expand';
    const targetTop = 40;

    // 额外判断target是否存在，避免找不到元素时的后续报错
    if (target && document.body.classList.contains(targetClass) && target.classList.contains(targetClass)) {
      target.removeAttribute('style');
      target.classList.remove(targetClass);
      document.body.classList.remove(targetClass);
    } else if (target) {
      document.body.classList.add(targetClass);
      target.classList.add(targetClass);
      // 原代码中targetTop未使用，若需要设置顶部样式可取消下方注释
      // target.style.top = `${targetTop}px`;
    }

    window.dispatchEvent(new Event('resize'));
  };

  // 此时toggler.value已通过前面的判断确保存在，可安全传入Tooltip
  new Tooltip(toggler.value, {
    title: 'Expand / Compress',
    placement: 'bottom',
    trigger: 'hover',
    container: 'body',
  });
});
</script>

<template>
  <a href="#" class="text-white text-opacity-50 text-decoration-none" data-toggle="card-expand" ref="toggler">
    <i class="bi bi-fullscreen"></i>
  </a>
</template>

错误1：'toggler.value' is possibly 'null' #

• 原因：TypeScript无法确定onMounted执行时DOM元素一定已挂载，因此认为toggler.value可能为null。
• 解决：
  1. 在使用toggler.value前添加非空判断：if (!toggler.value) return;，确保后续代码仅在元素存在时执行。
  2. 给ref指定具体DOM类型：ref<HTMLAnchorElement | null>(null)，帮助TypeScript识别元素类型，提升类型安全性。

错误2：Property 'closest' does not exist on type 'Ref<null>' #

• 原因：你误将ref对象当成DOM元素调用closest方法，同时原代码错误地用toggler代替了点击元素本身。
• 解决：
  1. 点击事件使用普通函数（而非箭头函数），此时this指向当前点击的DOM元素，直接用this.closest('.card')获取父级.card元素，和原Option API逻辑完全一致。
  2. 添加target非空判断，避免closest找不到元素时出现null报错。

错误3：Argument of type 'null' is not assignable to parameter of type 'string | Element' #

• 原因：Tooltip构造函数要求传入的参数必须是有效的DOM元素或选择器字符串，但toggler.value可能为null，TypeScript禁止传递可能为空的值。
• 解决：通过前面的if (!toggler.value) return;判断，已确保toggler.value是有效的DOM元素，此时传递给Tooltip不会触发类型错误。

内容的提问来源于stack exchange，提问作者user21932874