使用Nuxt 3+TypeScript时@click触发类型错误问题

你遇到的错误信息如下：

Type '($event: any) => void' is not assignable to type 'MouseEvent'.ts(2322)
__VLS_types.ts(107, 56): The expected type comes from property 'click' which is declared here on type 'EventObject<undefined, "click", {}, MouseEvent | undefined>'

以下是几种常见的解决方式：

• 检查指令语法是否正确
  不要直接使用click属性绑定函数，这会被TypeScript识别为DOM元素的原生click属性（要求值为MouseEvent类型），而非Vue的点击事件绑定。
  错误写法：

  <div click="handleClick">点击我</div>
  

  正确写法：

  <div @click="handleClick">点击我</div>
  <!-- 或使用完整写法 -->
  <div v-on:click="handleClick">点击我</div>
  

• 修正事件处理函数的类型定义
  确保你的点击事件处理函数参数类型符合要求：

  // 需要使用事件对象时
  const handleClick = (event: MouseEvent) => {
    // 你的处理逻辑
  }
  
  // 不需要事件对象时，直接定义无参函数
  const handleClick = () => {
    // 你的处理逻辑
  }
  

• 清除缓存并重启服务
  若上述方法无效，可能是Vue Language Server的缓存问题：

  1. 删除项目根目录下的.nuxt文件夹和node_modules/.cache文件夹
  2. 重新安装依赖并启动开发服务：

     rm -rf .nuxt node_modules/.cache
     npm install
     npm run dev
     

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