Vue3+TSX+Vuetify绑定onClick事件遇TypeScript报错求助

问题重现 #

在Vue 3 + TypeScript + TSX + Vuetify项目中，给VBtn组件绑定onClick事件时触发TypeScript类型错误：

错误代码 #

<VBtn
    onClick={() => {
        isShow.value = true
    }}
>
    Add category
</VBtn>

报错信息 #

Vue: Type { onClick: () => void; } is not assignable to type
IntrinsicAttributes & Partial<{ symbol: any; replace: boolean; flat: boolean; variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain"; exact: boolean;  ... 12 more ...; ripple: boolean | ... 1 more ... | undefined; }> & Omit<...>
Property onClick does not exist on type
IntrinsicAttributes & Partial<{ symbol: any; replace: boolean; flat: boolean; variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain"; exact: boolean;  ... 12 more ...; ripple: boolean | ... 1 more ... | undefined; }> & Omit<...>

用户当前通过展开对象的方式临时绕过类型检查，但需要规范解决方案。

规范解决方案 #

方案1：扩展Vuetify组件类型（推荐） #

由于Vuetify的VBtn类型定义未显式包含onClick属性，我们可以通过类型声明文件扩展其属性：

1. 在项目src/types目录下创建vuetify.d.ts文件：

import type { VBtnProps } from 'vuetify/components/VBtn'

declare module 'vuetify/components/VBtn' {
  interface VBtnProps {
    onClick?: (event: MouseEvent) => void
  }
}

2. 修改tsconfig.json确保类型文件被识别：

{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"]
}

之后即可正常使用onClick绑定事件，类型检查会自动通过。

方案2：升级依赖版本 #

部分旧版本的Vuetify或vue-tsc存在TSX事件绑定的类型兼容问题，升级到最新稳定版：

• Vuetify 3.x
• vue-tsc 1.x+
• typescript 5.x+

升级后重新安装依赖，类型报错通常会自动消失。

方案3：使用组件实例绑定事件（备选） #

通过ref获取VBtn实例，在生命周期钩子中绑定事件：

import { ref, onMounted } from 'vue'
import VBtn from 'vuetify/components/VBtn'

const btnRef = ref<InstanceType<typeof VBtn> | null>(null)

onMounted(() => {
  btnRef.value?.$on('click', () => {
    isShow.value = true
  })
})

// TSX渲染部分
<VBtn ref={btnRef}>
    Add category
</VBtn>

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