Vue3 + TypeScript中defineEmits 类型定义解析

TypeScript 中 Vue 3 的 defineEmits 函数的类型定义，用于声明组件可以触发的事件。以下是分步解释：

1. 泛型定义

ts

<"closeDialog" | "getApplySampleAndItemX">

• 作用：定义允许的事件名称集合，即组件只能触发 closeDialog 或 getApplySampleAndItemX 两个事件。

• 说明：这是一个泛型参数，限定事件名必须为这两个字符串字面量类型之一。

---

2. 函数参数

ts

(emitOptions: ("closeDialog" | "getApplySampleAndItemX")[])

• 作用：接受一个事件名数组作为参数（如 ['closeDialog']）。

• 说明：emitOptions 是事件名的数组，用于运行时声明组件支持的事件。

---

3. 返回值函数

ts

(event: "closeDialog" | "getApplySampleAndItemX", ...args: any[]) => void

• 作用：返回一个 emit 函数，用于触发事件。

  • event：要触发的事件名，必须是泛型定义中的事件。

  • ...args：事件的参数（类型宽松，允许任意参数）。

• 说明：调用 emit('closeDialog') 或 emit('getApplySampleAndItemX', arg1, arg2) 时，参数类型不会被严格约束（因 args 是 any[]）。

---

4. 重载（+2 overloads）

• 作用：提供多种类型定义，以适应不同使用场景。

  • 场景一：运行时声明（传入事件名数组，参数宽松）。

    ts

    defineEmits(['closeDialog'])

  • 场景二：类型声明（通过接口定义事件参数类型，类型严格）。

    ts

    defineEmits<{(e: 'closeDialog'): void;(e: 'getApplySampleAndItemX', sample: string, item: number): void;
    }>()

  • 场景三：可能其他配置方式（如混合使用或额外选项）。

---

总结

• 用途：在 Vue 组件中定义可触发的事件。

• 两种用法：

  1. 运行时声明：传入字符串数组，参数类型宽松。

  2. 类型声明：通过接口定义事件及参数类型，实现严格类型检查。

• 代码中的类型：对应运行时声明，允许任意参数（any[]），而重载覆盖了类型声明等场景，提供更灵活的类型支持。

示例

typescript

// 运行时声明（参数宽松）
const emit = defineEmits(['closeDialog', 'getApplySampleAndItemX']);
emit('closeDialog'); // 正确
emit('getApplySampleAndItemX', 123, 'abc'); // 参数类型不检查// 类型声明（参数严格）
const emitStrict = defineEmits<{(e: 'closeDialog'): void;(e: 'getApplySampleAndItemX', sample: string, item: number): void;
}>();
emitStrict('getApplySampleAndItemX', 'sample', 123); // 参数类型匹配
emitStrict('getApplySampleAndItemX', 123, 'sample'); // 错误：参数类型不匹配

通过重载，defineEmits 能同时支持灵活和严格的类型检查，适应不同开发需求。