$props() para props tipadas
Declare las props de los componentes mediante desestructuración y tipos de TypeScript usando $props().
$props() para props tipadas es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 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 Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Nueva API de props
Svelte 5 introduce $props() para declarar los props de un componente mediante una asignación desestructurada.
Uso básico
Desestructure los props en una sola expresión.
let { name, count = 0 } = $props();Valores predeterminados
Los valores predeterminados utilizan los valores predeterminados estándar de la desestructuración.
let { theme = "dark" } = $props();Props obligatorios
Los props sin un valor predeterminado son obligatorios. TypeScript puede exigirlo en el modo con tipos.
Props tipados
Añada un genérico de TypeScript para obtener seguridad de tipos completa.
let { name, count = 0 }: { name: string; count?: number } = $props();Props restantes
Capture los props restantes mediante la sintaxis rest.
let { name, ...rest } = $props();Children y snippets
La propiedad children contiene el contenido predeterminado del slot como un snippet.
let { children } = $props();No más export let
$props() reemplaza la antigua sintaxis export let en Svelte 5.
Reactivo
Los props se actualizan de forma reactiva cuando el componente padre pasa valores nuevos.
Propagación mediante spread
Propague los props rest a elementos internos mediante la propagación de objetos.
<input {...rest} />Compatibilidad con versiones anteriores
export let sigue funcionando durante la migración; mézclelas gradualmente.
Comprobación rápida
¿Cómo se declaran los props en Svelte 5?
Resumen
$props() es la nueva API de props de Svelte 5. Desestructure con valores predeterminados y tipos para crear componentes limpios y seguros.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «$props() para props tipadas» es gratis?
Sí — el texto completo de «$props() para props tipadas» 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 Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «$props() para props tipadas»?
Declare las props de los componentes mediante desestructuración y tipos de TypeScript usando $props(). Practicas Sveltejs 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 Sveltejs Academy?
No se requiere experiencia previa. Sveltejs 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 1 de 4.
¿Cuánto tiempo toma la lección «$props() para props tipadas»?
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 Sveltejs Academy?
Sí. Cada lección de Sveltejs 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
- $props() para props tipadas
- {#snippet} y {@render}
- Pasar snippets como props
- Snippets predeterminados y con nombre