在使用 element-plus 搭配 ts 时,如何让组件方法有正确的类型提示?

Question

下面是一段官方的 demo

<template>
  <el-button ref="buttonRef" v-click-outside="onClickOutside"
    >Click me</el-button
  >

  <el-popover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    trigger="click"
    title="With title"
    virtual-triggering
  >
    <span> Some content </span>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
</script>

如果悬停在 popperRef 和 delayHide 上都是 any 类型

我尝试了下面的方法,但是会报 delayHide 方法没有定义

import { ElPopover } from 'element-plus';

const popoverRef = ref<InstanceType<typeof ElPopover>>()

如何正确地使组件的方法有类型定义

Answer 1

import type { PopoverInstance} from 'element-plus';

const popoverRef = ref<PopoverInstance>()