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

下面函数 参数 的类型,因为不知道写,所以都写的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 = '' // 关闭下拉菜单
  }

指定为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)
}

是obj: MouseEvent

鼠标事件类型直接用Event声明会报错:

类型应该声明为:MouseEvent

如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

img

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632