Props y emits tipados con defineProps/defineEmits
defineProps () genérico, tipos complejos, props opcionales y tipado de emits
Props y emits tipados con defineProps/defineEmits es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Tipado de las entradas y salidas de los componentes
Con lang="ts", los macros defineProps y defineEmits aceptan tipos de TypeScript directamente. Esto proporciona comprobaciones en tiempo de compilación sobre los datos que entran y salen de un componente.
Props a partir de una interfaz
Pase un tipo al genérico de defineProps. Una interface mantiene legibles y reutilizables las estructuras complejas de las props.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Literales de tipo en línea
Para componentes pequeños, un tipo de objeto en línea es suficiente; no hace falta una interfaz independiente.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Propiedades opcionales con ?
Marque una propiedad como opcional con ?. Las props opcionales se tipan como T | undefined y el componente padre puede omitirlas.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Tipos complejos de props
Las props pueden ser arrays, uniones o estructuras de objetos: cualquier cosa que TypeScript pueda expresar.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Valores predeterminados con withDefaults
La forma que solo contiene el tipo no puede incluir valores predeterminados, así que debe envolverla en withDefaults. El segundo argumento asigna valores predeterminados a los nombres de las props.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Valores predeterminados para objetos y arrays
Los valores predeterminados de objetos y arrays deben devolverse desde una función factoría, igual que en la Options API, para evitar compartir una misma instancia entre componentes.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Declaración de emits con tipos
defineEmits puede recibir un tipo que enumere cada evento y su payload como una signatura de llamada. Esto detecta en tiempo de compilación los tipos de payload incorrectos.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Emisión de payloads con tipos
Ahora emit solo acepta nombres de eventos válidos y payloads con los tipos correspondientes. Pasar un número cuando se espera una cadena produce un error de compilación.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}La sintaxis de tuplas con nombre
Vue 3.3+ admite una forma abreviada basada en objetos, en la que cada evento se asigna a una tuple de sus tipos de argumentos, más limpia que las signaturas de llamada.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props y emits juntos
Un componente con tipos suele declarar ambos: las entradas mediante defineProps y las salidas mediante defineEmits, con comprobación completa de extremo a extremo.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Comprobación rápida
Compruebe sus conocimientos sobre props y emits con tipos.
Resumen
Ha aprendido a tipar las entradas y salidas de los componentes:
- Pase una interfaz o un tipo en línea a defineProps<T>().
- Use ? para las props opcionales y withDefaults para los valores predeterminados (una factoría para objetos/arrays).
- defineEmits<T>() asigna tipos a los nombres de eventos y sus payloads.
- La forma de tupla (event: [payload]) es la sintaxis abreviada moderna.
Preguntas frecuentes
¿La lección «Props y emits tipados con defineProps/defineEmits» es gratis?
Sí — el texto completo de «Props y emits tipados con defineProps/defineEmits» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Props y emits tipados con defineProps/defineEmits»?
defineProps () genérico, tipos complejos, props opcionales y tipado de emits Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Props y emits tipados con defineProps/defineEmits»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de TypeScript en proyectos Vue
- Props y emits tipados con defineProps/defineEmits
- Tipado de composables y refs
- Componentes Vue genéricos