Vue+TypeScript中SubmitEvent事件处理器类型不兼容问题求助

TypeScript的函数参数类型遵循逆变规则：接收父类型（Event）的函数可以兼容子类型事件，但接收子类型（SubmitEvent）的函数无法兼容父类型事件。Volar默认推断表单@submit事件的参数类型为通用Event，因此你的handleSubmit函数（参数为SubmitEvent）会触发类型不匹配报错。

方案1：参数声明为Event，内部断言为SubmitEvent #

将函数参数类型改为通用Event，在函数内部通过类型断言转为SubmitEvent，既符合Volar的类型推断，又能安全访问SubmitEvent专属属性：

<script setup lang="ts">
function handleSubmit(e: Event) {
  const submitEvt = e as SubmitEvent;
  console.log(`Submitted: ${submitEvt.defaultPrevented}`);
}
</script>

<template>
  <div>
    <h4>Create new</h4>
    <div>
      <form @submit.prevent="handleSubmit">
        <button type="submit">Submit</button>
      </form>
    </div>
  </div>
</template>

方案2：使用Vue专属表单事件类型 #

导入Vue提供的FormSubmitEvent类型（来自@vue/runtime-dom），直接作为函数参数类型，让Volar正确识别事件类型：

<script setup lang="ts">
import type { FormSubmitEvent } from '@vue/runtime-dom';

function handleSubmit(e: FormSubmitEvent) {
  console.log(`Submitted: ${e.defaultPrevented}`);
}
</script>

<template>
  <div>
    <h4>Create new</h4>
    <div>
      <form @submit.prevent="handleSubmit">
        <button type="submit">Submit</button>
      </form>
    </div>
  </div>
</template>

方案3：模板中显式断言事件类型 #

在模板绑定事件时，通过箭头函数显式传递事件并断言类型，适合不想修改函数参数类型的场景：

<script setup lang="ts">
function handleSubmit(e: SubmitEvent) {
  console.log(`Submitted: ${e.defaultPrevented}`);
}
</script>

<template>
  <div>
    <h4>Create new</h4>
    <div>
      <form @submit.prevent="(e) => handleSubmit(e as SubmitEvent)">
        <button type="submit">Submit</button>
      </form>
    </div>
  </div>
</template>

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