Props tipadas con Astro.props

El problema: tarjetas iguales

En la lección anterior creaste un componente Card y lo usaste tres veces. Pero las tres tarjetas mostraban exactamente el mismo contenido. En la práctica querrás algo así:

Lo que pasa entre las etiquetas (title="...") son props: datos que el componente recibe para personalizar su render.

Recibir props en el frontmatter

Astro expone las props en Astro.props. Lo idiomático es destructurarlas:

Astro.props siempre está disponible dentro de cualquier componente .astro.

Tipar props con TypeScript

Astro está pensado para TypeScript de fábrica. La convención es declarar una interface Props en el frontmatter — Astro la detecta automáticamente y comprueba los tipos en el sitio donde uses el componente.

Con esto:

• Si pasas un número en title, TypeScript se queja.
• Si te olvidas de pasar body, TypeScript se queja.
• Tu editor sugiere las props al escribir <Card.

Props opcionales y por defecto

Marca opcionales con ? y dales valor por defecto en la destructuración:

Pasar cualquier tipo, no solo strings

Las llaves {} también funcionan al pasar props. Eso te permite enviar números, booleanos, arrays, objetos, funciones...

Pasar el resto con ...rest

A veces solo te interesa una prop concreta y quieres dejar pasar todas las demás al elemento que renderizas:

Ahora puedes hacer <Button onclick="...">Ok</Button> y el onclick viaja hasta el <button> real.

Tu desafío 🚀

Tienes dos archivos:

1. src/components/Card.astro
2. src/pages/index.astro (que ya importa Card)

En Card.astro:

• Define interface Props { title: string; body: string } en el frontmatter.
• Destructura const { title, body } = Astro.props.
• Imprime {title} dentro del <h2> y {body} dentro del <p>.

En index.astro:

• Usa el componente al menos dos veces, pasando valores distintos a title y body. Por ejemplo:

Si TypeScript se queja al pasar las props, lee el mensaje: te está diciendo que el contrato no cuadra.