Vue 3.3+（TypeScript）如何定义非void返回类型的emit？

在Vue 3.3及以上版本中，默认用数组语法定义emit时，返回类型是void。如果要让特定事件的emit调用返回非void类型（比如string），只需把事件的类型定义从参数数组改成完整的函数类型即可——函数的参数列表对应emit的参数，返回值就是你想要的类型。

举个实际例子：

<script setup lang="ts">
const emit = defineEmits<{
  // change事件：接收number类型的id参数，返回string类型
  change: (id: number) => string
  // update事件保持默认void返回类型，也可以明确写出
  update: (value: string) => void
}>()

// 调用change事件时，TypeScript会自动推断返回值为string
const emitResult = emit('change', 100)
// 此时emitResult的类型是string，可以直接用它做后续处理
console.log(emitResult)
</script>

需要注意的是，这个类型约束只是TypeScript层面的校验，实际返回值完全由父组件绑定的事件处理函数决定。比如父组件里的@change回调要确实返回对应类型，否则会触发类型不匹配的警告：

<!-- 父组件示例 -->
<ChildComponent @change="(id) => `处理完成：${id}`" />

这样父组件返回的字符串就会被子组件的emit调用接收到，同时TypeScript也会全程做类型校验。

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