Vue TS中访问HTMLElement的_instance报错，该指定什么类型？

问题原因 #

_instance是Vue内部为组件挂载的DOM元素添加的私有属性，TypeScript的内置HTMLElement类型并未包含该属性，因此直接访问会触发类型错误。

方案1：自定义类型并断言 #

定义一个扩展HTMLElement的类型，包含_instance属性及其方法，再将DOM元素断言为该类型：

// 自定义类型，替换any为someValue的实际类型
interface VueMountedElement extends HTMLElement {
  _instance?: {
    exposed: (value: any) => void;
  };
}

onMounted(() => {
  // 断言元素为自定义类型或null
  const myEl = document.querySelector('myHTMLElement') as VueMountedElement | null;

  nextTick(() => {
    // 同时判断元素和_instance是否存在
    if (myEl?._instance) {
      myEl._instance.exposed(someValue);
    }
  });
});

方案2：全局扩展HTMLElement类型 #

如果项目中多处需要访问_instance，可以全局扩展HTMLElement类型，避免重复定义：

在项目的src/types目录下创建vue.d.ts文件（无types目录则新建），添加以下内容：

declare global {
  interface HTMLElement {
    _instance?: {
      exposed: (value: any) => void;
    };
  }
}

export {};

之后直接使用HTMLElement类型即可，无需额外断言：

onMounted(() => {
  const myEl = document.querySelector('myHTMLElement') as HTMLElement | null;

  nextTick(() => {
    if (myEl?._instance) {
      myEl._instance.exposed(someValue);
    }
  });
});

更推荐的替代方案 #

_instance是Vue内部私有属性，不同版本可能存在变动，优先使用Vue官方推荐的组件实例获取方式：通过ref直接绑定组件，而非依赖DOM元素的内部属性。

示例代码：

<template>
  <myHTMLElement ref="myComponentRef"></myHTMLElement>
</template>

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

// 直接指定组件实例类型
const myComponentRef = ref<InstanceType<typeof MyHTMLElement> | null>(null);

onMounted(() => {
  nextTick(() => {
    myComponentRef.value?.exposed(someValue);
  });
});
</script>

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