Cuando trabajas con componentes en React y TypeScript, los props son simplemente un objeto al que le defines tipos como harías con cualquier otro objeto. Entender esto te permite construir componentes reutilizables, seguros y libres del temido any. Aquí vas a ver cómo pasar una imagen como prop desde un componente padre y cómo tipar correctamente esa propiedad.

¿Qué son los props en React y cómo se tipan con TypeScript?

Los props son los valores que un componente padre le pasa a un componente hijo. En el ejemplo del componente RandomPhoto, la imagen estaba definida dentro del propio componente, pero la idea es moverla para que el index.tsx decida qué imagen mostrar.

Apenas haces ese cambio, TypeScript te avisa que ese atributo no existe. Y tiene razón: nunca le dijiste a tu función que aceptaba props. Por eso necesitas declarar explícitamente qué recibe tu componente y de qué tipo es cada valor [01:00].

¿Qué es un prop en React? Es un objeto con los valores que un componente padre le envía a un componente hijo. En TypeScript lo tipas como cualquier otro objeto, definiendo cada propiedad y su tipo.

¿Cómo definir el tipo de los props directamente en la función?

La primera forma de tiparlos es hacerlo en línea, justo en los parámetros de la función. Si dejas el parámetro sin tipo, TypeScript lo marca como any, y recuerda: any es el enemigo de un código predecible.

Una versión inicial sería declarar que props es un objeto con una propiedad image de tipo string. Así, cuando uses props.image dentro del src de la etiqueta <img>, TypeScript queda satisfecho porque el tipo coincide con lo que espera el atributo.

Esta forma funciona, pero tiene un problema: a medida que agregas más propiedades al componente, el tipado en línea se vuelve difícil de mantener [02:10].

¿Cuál es la forma más limpia de tipar props en un componente?

La práctica más común es extraer el tipo a un alias llamado Props con P mayúscula. Defines ese tipo como un objeto que lista cada propiedad con su tipo correspondiente, y luego se lo asignas al parámetro de la función.

Pasos para tipar props de forma escalable

1. Crear un type llamado Props que describa el objeto.
2. Listar cada propiedad esperada con su tipo, por ejemplo image: string.
3. Asignar ese tipo al parámetro de la función del componente.

Con esto consigues claridad, autocompletado y un único lugar donde mantener la forma del objeto cuando el componente crezca.

¿Qué es destructuring y por qué se usa con props?

En lugar de recibir props y luego escribir props.image cada vez, puedes hacer destructuring directamente en los parámetros: ({ image }: Props). Ojo, aquí no estás cambiando el tipo, solo la forma en que accedes al valor.

El resultado es código más corto y legible. Dentro del componente usas image directamente, sin el prefijo props., y TypeScript sigue validando que esa propiedad exista en el objeto.

¿Para qué sirve el destructuring en props? Permite extraer las propiedades del objeto props como variables individuales, haciendo el código más limpio sin alterar los tipos definidos.

¿Cómo agregar más props a un componente sin romper los tipos?

Si quieres soportar nuevas propiedades, como un alt para la imagen, TypeScript te detendrá hasta que las declares. El flujo es siempre el mismo: agregas la propiedad al tipo Props con su tipo correcto y luego la consumes dentro del componente.

Por ejemplo, si necesitas un texto alternativo, añades alt: string al tipo Props, lo incluyes en el destructuring y lo usas en la etiqueta. Si intentas usar alt sin haberlo declarado, TypeScript te avisa de inmediato, igual que pasó al inicio con image [03:40].

Este patrón se repite para cada nuevo prop:

• Declarar la propiedad y su tipo en Props.
• Recibirla mediante destructuring en la función.
• Consumirla donde la necesites dentro del JSX.

La lógica es la misma sin importar cuántas propiedades agregues. Lo que cambia es la cantidad de campos que listas en tu tipo Props, manteniendo el componente predecible y fácil de mantener.

Si te quedó alguna duda sobre cómo estructurar tus tipos o por qué evitar any, déjala en los comentarios y conversemos.