Vue3 Composition API中TypeScript泛型接口定义Emits编译报错问题

这个问题出在Vue模板编译器（vite:vue）对defineEmits类型参数的解析逻辑上，具体原因如下：

• 泛型接口的命名元组解析限制：你定义的FormInputEmits是带默认值的泛型接口，其中'update:modelValue'对应的类型是带命名参数的元组[payload: T]。当defineEmits尝试解析这个泛型接口时，编译器无法正确处理泛型默认值与命名元组的组合，误将泛型的默认值处理逻辑识别成了赋值模式（AssignmentPattern），这就触发了你看到的错误。

• 对象字面量类型的优势：改用对象字面量类型时，你直接提供了一个具体化的类型定义（没有泛型接口的间接性），编译器可以直接解析元组里的命名参数，不需要处理泛型接口的展开和默认值逻辑，因此编译正常。

可行的解决方案 #

1. 将泛型接口改为类型别名
   把interface换成type，TypeScript对类型别名的泛型解析逻辑更直接，Vue编译器通常能正确处理：

   export type FormInputEmits<T = string | number | boolean> = {
     'update:modelValue': [payload: T]
   }
   

   之后在组件里依旧用defineEmits<FormInputEmits<string | number>>()即可。

2. 移除元组的命名参数
   如果不需要元组的命名提示，可以把命名参数去掉，改成普通元组：

   export interface FormInputEmits<T = string | number | boolean> {
     'update:modelValue': [T]
   }
   

   这种情况下编译器能正确解析泛型接口，不会触发错误，但调用emit时参数会失去命名提示。

3. 直接实例化泛型到对象字面量
   保持你之前的可行写法，或者封装成泛型函数来生成类型，避免直接使用泛型接口：

   type CreateFormInputEmits<T = string | number | boolean> = {
     'update:modelValue': [payload: T]
   }
   // 组件内使用
   const emit = defineEmits<CreateFormInputEmits<string | number>>();
   

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