我正在使用 Vue 3 和 TS 4.4。我有一个组件，它使用 defineProps 定义其 prop 类型。当我添加对 defineEmits 的调用时，VS Code 开始告诉我组件模板中不存在我的 props 变量。这是源代码:

<script setup lang="ts">
import { defineProps, defineEmits, VueElement, defineComponent } from "vue";

const emit = defineEmits<{
  "update:checked": boolean;
}>();

const props = defineProps<{
  label?: VueElement | string;
  checked?: boolean;
}>();
</script>

<template>
  <label>
    <input
      type="checkbox"
      :checked="props.checked"
      @change="(event) => emit('update:checked', (event.target as any)?.checked)"
    />
    {{ props.label }}
  </label>
</template>

还有一些屏幕截图可以更好地展示我在 VS Code 中看到的内容。这是在添加 defineEmits 之后:

这是没有 defineEmits 的:

定义 props 和 emitts 类型的正确方法是什么？

最佳答案

defineEmits<T>() generic argument本质上是一个仅定义函数的TypeScript接口(interface)，它接收特定的事件名称和可选参数:

interface Emits {
  (e: __EVENT1_NAME__ [, arg1: __ARG1_TYPE__ [, arg2: __ARG2_TYPE__]]...): void
  (e: __EVENT2_NAME__ [, arg1: __ARG1_TYPE__ [, arg2: __ARG2_TYPE__]]...): void
}

示例:

// as inline type
const emits = defineEmits<{
  (eventName: 'hover', hovering: boolean): void
  (eventName: 'changed', newValue: number, id: string): void
}>()

// as interface
interface Emits {
  (eventName: 'hover', hovering: boolean): void
  (eventName: 'changed', newValue: number, id: string): void
}
const emits = defineEmits<Emits>()

// as type alias
type Emits = {
  (eventName: 'hover', hovering: boolean): void
  (eventName: 'changed', newValue: number, id: string): void
}
const emits = defineEmits<Emits>()

为您的update:checked事件，代码应类似于以下内容:

// as inline type
const emits = defineEmits<{
  (e: 'update:checked', checked: boolean): void
}>()

// as interface
interface Emits {
  (e: 'update:checked', checked: boolean): void
}
const emits = defineEmits<Emits>()

// as type alias
type Emits = {
  (e: 'update:checked', checked: boolean): void
}
const emits = defineEmits<Emits>()

https://stackoverflow.com/questions/69399586/