Vue 3.3.4中如何用TypeScript类型式声明update:modelValue事件？

在Vue 3.3.4的TypeScript环境中，完全可以用类型式语法声明update:modelValue这类带冒号的v-model相关emit事件，报错的原因是没有遵循TypeScript对象类型的键名规则——包含特殊字符的键名需要用字符串字面量包裹。

正确的声明方式 #

直接将带冒号的事件名用单引号或双引号包裹，作为对象类型的键即可：

const emit = defineEmits<{
  // 字符串字面量包裹带冒号的事件名
  'update:modelValue': [value: string] 
  // 其他带特殊字符的事件同理
  'update:visible': [show: boolean]
}>()

原理说明 #

TypeScript中，对象类型的键名如果包含冒号、连字符这类特殊符号，不能直接裸写（裸写时TS会把冒号识别为键值对的分隔符，导致语法错误）。用字符串字面量包裹后，TS会将其识别为一个完整的属性名，从而正常完成类型校验。

这样声明后，调用emit('update:modelValue', 'new content')时，TypeScript会自动校验参数类型，同时也能正常配合Vue的v-model语法使用。

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