Vue3中如何从defineEmits推断事件名列表并解决类型报错？

核心思路 #

借助TypeScript的类型提取能力，从defineEmits返回的emit函数中自动提取事件名称与对应参数类型，让createProxy函数继承这些类型约束，实现事件名的自动补全并消除类型报错，全程无需额外类型断言。

具体实现步骤 #

1. 定义事件类型提取工具 #

先写一个类型工具，专门从Vue的emit函数中解析出事件名和参数的映射关系：

// 从emit函数中提取事件名与参数类型的映射
type ExtractEmitMap<EmitFn> = 
  EmitFn extends (...args: infer Args) => void
    ? Args[0] extends string
      ? Record<Args[0], Args[1]>
      : never
    : never;

2. 改造createProxy函数，接入类型约束 #

让createProxy接收组件的emit函数作为参数，通过上面的类型工具自动推断事件类型，约束内部emit调用的合法性：

function createProxy<Props, EmitFn extends (...args: any[]) => void>(
  props: Props,
  emit: EmitFn
) {
  // 初始化内部状态，复制props默认值
  const internalState = { ...props };

  // 封装带类型约束的emit方法
  const typedEmit = <EventName extends keyof ExtractEmitMap<EmitFn>>(
    event: EventName,
    ...args: ExtractEmitMap<EmitFn>[EventName]
  ) => {
    emit(event as string, ...args);
  };

  return new Proxy(internalState, {
    set(target, key, value) {
      const propKey = key as keyof Props;
      target[propKey] = value;
      // 自动触发update类型事件，类型自动匹配props字段
      typedEmit(`update:${key}` as keyof ExtractEmitMap<EmitFn>, value);
      return true;
    },
    // 其他代理逻辑按需补充
  });
}

3. 组件内使用示例 #

在组件中通过defineEmits定义事件后，直接将emit函数传入createProxy，此时调用typedEmit时会自动提示合法事件名，参数类型也会被严格约束：

<script setup lang="ts">
// 定义组件事件，明确事件名与参数类型
const emit = defineEmits<{
  'update:username': [newValue: string];
  'user-change': [oldVal: string, newVal: string];
}>();

// 定义组件props
const props = defineProps<{
  username: string;
}>();

// 创建代理，自动继承props和emit的类型
const proxy = createProxy(props, emit);

// 调用时自动提示事件名，参数类型不匹配会直接报错
typedEmit('update:username', 'new-user');
typedEmit('user-change', 'old-user', 'new-user');
</script>

4. 进阶优化：自动生成update事件类型 #

如果组件大量使用update:xxx格式的事件，可以通过类型工具自动生成这类事件的类型，无需手动逐个定义：

// 根据props自动生成对应的update事件类型
type AutoUpdateEvents<Props> = {
  [K in keyof Props as `update:${string & K}`]: [value: Props[K]];
};

// 在组件中合并自动生成的事件与自定义事件
const emit = defineEmits<AutoUpdateEvents<typeof props> & {
  'user-change': [oldVal: string, newVal: string];
}>();

这样createProxy在触发update:xxx事件时，参数类型会自动匹配对应props字段的类型，进一步减少重复代码。

关键优势 #

• 完全基于defineEmits的类型定义自动推断，无需手动维护事件名列表，避免不一致问题
• 无需使用类型断言绕过类型检查，保证代码的类型安全性
• IDE会自动提示合法事件名和参数格式，开发体验更流畅

内容的提问来源于stack exchange，提问作者Erutan409