Vue组件emits的TypeScript类型声明核心是defineEmits泛型函数签名，支持事件名、参数个数与类型的精准推导和校验，确保IDE跳转、编译报错及重构联动；推荐<script setup>中使用泛型声明，如defineEmits<{(e:'submit',data:FormData):void;(e:'cancel'):void}>()，支持重载；也可用数组声明+const断言或扩展第三方库类型，父子组件事件参数类型自动对齐校验。
Vue 组件的 emits 在 TypeScript 中声明事件类型，核心是用 defineEmits 配合泛型函数签名，让事件名、参数个数和类型全部可推导、可校验。不是加个注释，而是让 IDE 能跳转、编译器能报错、重构时能联动更新。
用泛型声明精确的事件签名
这是最推荐的方式，尤其适合 <script setup> 场景。每个事件对应一个函数签名，参数顺序和类型都明确：
-
defineEmits<{ (e: 'submit', data: FormData): void; (e: 'cancel'): void }>()—— 表示组件可触发submit（带一个FormData参数）或cancel（无参） - 多个同名事件？可以重载：
(e: 'change', value: string): void; (e: 'change', value: number): void - 返回的
emit函数会严格校验调用：写emit('submit', 123)就直接报错，因为类型不匹配
运行时声明 + 类型断言（兼容简单场景）
如果暂时不想写泛型，或需动态判断事件合法性，可用数组形式声明事件名，再配合类型断言保障参数安全：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
-
const emit = defineEmits(['update:modelValue', 'error'])—— 声明允许触发的事件名 - 手动标注调用类型：
emit('update:modelValue' as const, newValue)，避免字符串字面量被宽泛推导为string - 适合快速原型或事件结构极简的组件，但失去参数级类型检查
对接第三方组件库（如 PrimeVue）
官方类型往往只覆盖基础事件，复杂交互需要自己补全。以 Button 为例：
立即学习“前端免费学习笔记（深入）”；
- 通过模块声明扩展：
declare module 'primevue/button' { interface ButtonEmits { (e: 'click', ev: MouseEvent, el: HTMLButtonElement): void } } - 或用工具类型简化：
import { ComponentEmits } from 'primevue/src/utils/type-utils'; type ButtonEmits = ComponentEmits<{ click: [MouseEvent, HTMLButtonElement] }> - 补全后，父组件监听
@click时就能获得准确的ev和el类型提示
注意父子组件类型一致性
子组件声明了 emits 类型，父组件使用时也要对齐：
- 绑定事件时，
@update:modelValue="onUpdate"的onUpdate函数参数类型会自动推导为子组件定义的value类型 - 若子组件用
defineEmits<{ (e: 'change', id: number): void }>()，父组件里写@change="handler"，则handler的第一个参数就是number - 不一致会触发 TS 错误，比如把
id: number传成string，编译阶段就拦住
