问题现象与错误提示

在 Vue 3 组合式 API 开发过程中，经常会遇到以下 TypeScript 错误：

emit(‘orderSubmit’) 应有2个参数，但获得1个

这个错误通常出现在使用<script setup>语法糖时，特别是在使用 defineEmits 定义和调用自定义事件时。

典型错误场景:

// 组件定义
<script setup lang="ts">
const emit = defineEmits<{
  (e: 'orderSubmit', data: OrderData, options?: SubmitOptions): void
}>()

// 错误调用 - 参数数量不匹配
const handleSubmit = () => {
  emit('orderSubmit') //  错误：只传了事件名，缺少必要参数
}
</script>

问题根源深度分析

Vue 3 的 emit 机制解析

在 Vue 3 中，emit 函数的调用签名实际上是：

emit(eventName: string, ...args: any[]): void

而 defineEmits 的类型定义约束的是 负载参数（payload），不包括事件名本身。

TypeScript 的类型校验机制

当使用 TypeScript 定义 emit 类型时，Vue 会进行严格的参数数量校验：

// 类型定义
const emit = defineEmits<{
  (e: 'orderSubmit', data: OrderData, options: SubmitOptions): void
}>()

// 实际调用时的参数解析：
// emit('orderSubmit', data, options)
// │         │         │     └第三个参数：options (在类型定义中是第二个负载参数)
// │         │         第二个参数：data (在类型定义中是第一个负载参数)  
// │          第一个参数：事件名 (对应类型定义中的 e)
//  emit 函数本身

关键理解：类型定义中的参数数量 = emit 调用时的参数总数 - 1

解决方案

方案一：修正调用参数

<script setup lang="ts">
interface OrderData {
  id: number
  items: Array<{ id: number; name: string; quantity: number }>
  total: number
}

interface SubmitOptions {
  silent?: boolean
  validate?: boolean
  timeout?: number
}

const emit = defineEmits<{
  (e: 'orderSubmit', data: OrderData, options?: SubmitOptions): void
}>()

const orderData: OrderData = {
  id: 1,
  items: [{ id: 1, name: 'Product A', quantity: 2 }],
  total: 99.99
}

const submitOptions: SubmitOptions = {
  silent: true,
  validate: true,
  timeout: 5000
}

// 正确调用方式
const handleSubmit = () => {
  // 方式1：传入所有参数
  emit('orderSubmit', orderData, submitOptions) // 
  
  // 方式2：只传必需参数，省略可选参数
  emit('orderSubmit', orderData) // 
}
</script>

方案二：使用函数重载精确定义类型

对于复杂的参数场景，使用 TypeScript 函数重载提供更好的类型支持：

<script setup lang="ts">
interface OrderData { /* ... */ }
interface SubmitOptions { /* ... */ }

// 使用函数重载支持多种调用方式
const emit = defineEmits<{
  // 重载1：必需参数 only
  (e: 'orderSubmit', data: OrderData): void
  
  // 重载2：必需参数 + 可选配置
  (e: 'orderSubmit', data: OrderData, options: SubmitOptions): void
}>()

// 现在这些调用都是类型安全的
emit('orderSubmit', orderData)
emit('orderSubmit', orderData, submitOptions)
</script>