TypeScript 中为 defineEmits 声明强类型事件的核心是编译期校验事件名和参数类型，推荐使用类型字面量对象声明，其次为泛型接口声明，字符串数组声明类型最弱。
✅ 推荐：类型字面量对象声明（Type Literal）
这是目前 Vue 官方文档和企业项目中最主流、最安全的做法。
语法上定义一个函数签名对象，键是事件名（字符串字面量），值是一个返回布尔值的函数类型，参数即该事件允许传递的数据：
-
单参数事件：
update: (value: string) => boolean -
多参数事件：
move: (x: number, y: number) => boolean -
无参数事件：
reset: () => boolean -
可选参数或联合类型也支持：
change: (value: string | number) => boolean
示例：
const emit = defineEmits({<br/> submit: (data: { id: number; name: string }) => true,<br/> cancel: () => true,<br/> 'update:modelValue': (val: string) => true<br/>})
这样写后，调用 emit('submit', { id: 1 }) 少传字段、传错类型、拼错事件名，TS 都会立刻报错。
立即学习“前端免费学习笔记（深入）”；
✅ 兼容性好：泛型接口声明（Interface + defineEmits<T>）
适合事件多、结构复杂、需要复用或拆分到单独文件的场景。
先定义接口：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
interface Emits {<br/> (e: 'submit', data: { id: number }): void<br/> (e: 'cancel'): void<br/> (e: 'update:modelValue', value: string): void<br/>}
再使用泛型声明：
const emit = defineEmits<Emits>()
好处是接口可导出、可继承、可被多个组件复用，也支持重载签名，对大型项目更友好。
⚠️ 简单但弱类型：字符串数组声明（仅限原型或简单组件）
写法最简：
const emit = defineEmits(['submit', 'cancel', 'update:modelValue'])
缺点明显：
- 参数完全不校验，
emit('submit', 'oops')不会报错 - IDE 不知道每个事件该传什么，无自动补全
- 父组件监听时，回调参数类型只能靠手动标注（如
@submit="(d: any) => ..."）
仅建议用于快速验证逻辑、临时 demo 或极简子组件。
不复杂但容易忽略：事件名命名需与模板中绑定一致（比如 update:modelValue 对应 @update:model-value），kebab-case 是模板规范，但类型声明里必须用原始驼峰或带冒号形式。
