0
260
VistasVue 3 defineEmits rompe los tipos de defineProps
Estoy usando Vue 3 y TS 4.4. Tengo un componente que define sus tipos de accesorios con defineProps . Cuando agrego una llamada a defineEmits , VS Code comienza a decirme que mi variable de props no existe en la plantilla del componente. Aquí está el código fuente:
<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> Y un par de capturas de pantalla para mostrar mejor lo que veo en VS Code. Esto es después de agregar defineEmits :
Y esto es sin defineEmits :
¿Cuál es la forma correcta de definir tipos tanto para accesorios como para emisiones?
1 Respuestas
Responde la pregunta0
El argumento genérico defineEmits<T>() es esencialmente una interfaz de TypeScript que define solo funciones , que reciben un nombre de evento específico y argumentos opcionales:
interface Emits { (e: __EVENT1_NAME__ [, arg1: __ARG1_TYPE__ [, arg2: __ARG2_TYPE__]]...): void (e: __EVENT2_NAME__ [, arg1: __ARG1_TYPE__ [, arg2: __ARG2_TYPE__]]...): void }Ejemplos:
// 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>() Para su evento update:checked , el código debería ser similar al siguiente:
// 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>()