如何获取Vue单文件组件(SFC)emit事件的参数类型？

在Vue 3的单文件组件中，子组件通过defineEmits定义带类型的事件后，父组件用内联箭头函数绑定事件时，TypeScript能自动推断$event的类型，但如果要使用命名函数作为回调，就需要手动指定参数类型。下面提供两种可行的解决方式：

方法1：子组件导出事件参数类型 #

直接在子组件中把事件参数的类型单独提取并导出，父组件导入后使用：

// ChildComponent.vue
// 单独定义并导出save事件的参数类型
export type SaveEventParams = { new: Row[]; removed: Row[] };

const emit = defineEmits<{
  save: [data: SaveEventParams];
}>();

父组件中导入该类型，给命名函数的参数指定类型：

// ParentComponent.vue
import ChildComponent, { SaveEventParams } from './ChildComponent.vue';

function saveCallback(event: SaveEventParams) {
  performAPIRemove(event.removed); // TypeScript可正确识别参数类型
}

这种方式直观清晰，适合需要在多个地方复用该参数类型的场景。

方法2：通过TypeScript工具类型提取 #

如果不想修改子组件代码，可以利用Vue提供的ComponentEmits类型结合TypeScript内置工具来提取事件参数类型：

// ParentComponent.vue
import type { ComponentEmits } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 提取save事件的参数类型
type SaveEventParams = Parameters<ComponentEmits<typeof ChildComponent>['save']>[0];

function saveCallback(event: SaveEventParams) {
  performAPIRemove(event.removed); // 类型推断正常工作
}

代码解释 #

• ComponentEmits<typeof ChildComponent>：获取子组件所有emit事件的类型定义
• ['save']：定位到save事件对应的函数类型
• Parameters<...>：提取函数的参数数组类型
• [0]：取参数数组的第一个元素（因为save事件只有一个参数）

内容的提问来源于stack exchange，提问作者Ansis Spruģevics