请教Vue3 @click 等事件 参数的 TS 类型正确写法

Question

下面函数 参数 的类型,因为不知道写,所以都写的any, 请教要怎么写,我写 Event 也不行
obj: Event 没用,
obj:HTMLElement 也不行. 报错没有 target属性

请教 any 以外的正确写法

  function menuSelect(obj:any,index?:number){ // 菜单选择 @click
    if (/theme/.test(obj.target.__vnode.props.key)) {
      window.document.documentElement.setAttribute("data-theme", obj.target.__vnode.props.key) // 把主题名给docment
      ConfigProvider.config( // 按官方文档修改 primaryColor
        primaryColor[obj.target.__vnode.props.key] // 自定义变量
      )
    } else if (/[en|zh]/.test(obj.target.__vnode.props.key)) {
      i18n.global.locale = obj.target.__vnode.props.key
    }
      menuTopActive.value = '' // 关闭下拉菜单
  }
  function menuTopMouseEnter(obj: any){  // 菜单鼠标移入 @mouseenter
    menuTopActive.value = obj.target.__vnode.props.key  // 判断是自身吗，如果是就是显示
  }
  function menuTopMouseLeave(obj: any){ // 菜单鼠标移出 @mouseleave
    menuTopActive.value = '' // 关闭下拉菜单
  }

Answer 1

指定为Event，然后转换下类型试试

function menuTopMouseEnter(obj: Event){ // 菜单鼠标移入 @mouseenter
menuTopActive.value = (obj.target as HTMLInputElement).__vnode.props.key // 判断是自身吗，如果是就是显示
}

下面为官网的说明

为事件处理器添加类型
在处理原生 DOM 事件的时候，正确地为处理函数的参数添加类型或许会是有用的。让我们看这个例子：

<template>
  <input type="text" @change="handleChange" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    // `evt` 将会是 `any` 类型
    const handleChange = evt => {
      console.log(evt.target.value) // 此处 TS 将抛出异常
    }
    return { handleChange }
  }
})
</script>

如你所见，在没有为 evt 参数正确地声明类型的情况下，当我们尝试获取 元素的值时，TypeScript 将抛出异常。解决方案是将事件的目标转换为正确的类型：

const handleChange = (evt: Event) => {
  console.log((evt.target as HTMLInputElement).value)
}