Any es el demonio vale ☺
Introducción
TypeScript y React: Proyecto Práctico con Next.js
Tipado Implícito y Explícito en TypeScript
Creación de proyecto con Next.js y configuración de TypeScript
Tipado en React
Componentes de React con TypeScript: Creación de Lazy Image
Definición de Props en Componentes React con TypeScript
Tipado de useState en React con TypeScript
Refactorización de Tipos en TypeScript y React
React y el DOM
Manejadores de Eventos en React con TypeScript
Lazy Loading de Imágenes con React y TypeScript
Uso de IntersectionObserver en React para Carga Diferida de Imágenes
Creación de Componentes Genéricos con TypeScript y Lazy Loading
Implementación de onLazyLoad en React con TypeScript
Configuraciones avanzadas
Uso Correcto de Tipos Globales en TypeScript
Creación de Tipos Personalizados para Librerías en TypeScript
Integración de Plugins Externos en TypeScript
Próximos pasos
Tipado Avanzado en Redux con TypeScript y React
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Cuando trabajamos con React, es fundamental comprender cómo funcionan los props, ya que son el medio a través del cual los componentes se comunican entre sí. En términos simples, un prop es un objeto en React, y con TypeScript, lo tipificamos como cualquier otro objeto. Así, mantener el orden y la claridad en los componentes se vuelve primordial para un desarrollo efectivo en React.
Definir correctamente los props en un componente de React es esencial para el buen funcionamiento de la aplicación. En el siguiente ejemplo práctico, veremos el proceso detallado para definir y utilizar props en un componente:
Identificar el prop que se utilizará: En el componente RandomFox
, se desea pasar una imagen como prop desde el componente padre.
Definir el tipo de prop en TypeScript: Para ello, se tipifica el prop como se haría con cualquier otro objeto en TypeScript.
type ImageProp = {
image: string;
};
Ajustar el componente para aceptar props: Se indica al componente que aceptará props de tipo ImageProp
.
const RandomFox: React.FC<ImageProp> = ({ image }) => {
return <img src={image} alt="Random Fox" />;
};
Hacer destructuring de props: En lugar de utilizar la palabra props
para describir el valor, se utiliza destructuring para extraer directamente la propiedad necesaria.
const RandomFox: React.FC<ImageProp> = ({ image }) => {
return <img src={image} alt="Random Fox" />;
};
Utilizar el componente con los props correctos: Finalmente, en el archivo donde se utiliza el componente, se le pasan los props necesarios.
<RandomFox image="https://example.com/fox.jpg" />
Cuando un componente necesita gestionar múltiples props, el enfoque es similar, pero requiere atención a cada tipo de dato. Siga estos pasos:
Definir un tipo compuesto para los props: Se crea un objeto de tipo que incluya todas las propiedades necesarias.
type ComponentProps = {
image: string;
alt: string;
};
Actualizar el componente para aceptar los nuevos props: Se ajusta el tipo aceptado por el componente para incluir todos los props definidos.
const RandomFox: React.FC<ComponentProps> = ({ image, alt }) => {
return <img src={image} alt={alt} />;
};
Enviar los props al componente: Se asegura de incluir todos los props cuando se utiliza el componente.
<RandomFox image="https://example.com/fox.jpg" alt="A random fox image" />
TypeScript añade un nivel de confianza y seguridad al desarrollo con React, ya que proporciona:
A medida que continúas explorando el potencial de React y TypeScript juntos, experimentarás un desarrollo más estructurado y libre de errores. ¡Sigue adelante y descubre cómo gestionar el estado (state) ofrecerá otra capa de dinamismo a tus aplicaciones!
Aportes 8
Preguntas 6
Any es el demonio vale ☺
Para poder usar las props con TSX primero tenemos que tipar el objeto de props. Lo hacemos asignándole un tipo por cada prop que tengamos, y para hacerlo mas mantenible, separamos esos tipos en un objeto aparte (ya sea con type o interface).
// RandomFox.tsx
type Props = {
image: string;
alt: string;
// another prop
};
export const RandomFox = ({ image, alt }: Props): JSX.Element => {
// Lo que hicimos fue desestructurar el objeto props para
// quedarnos solo con lo que necesitamos (image y alt)
return (
<img width={320} height='auto' src={image} alt={alt} className='rounded' />
);
};
Nota: En dado caso de que queramos añadir una nueva prop, hay que definirle su tipo o sino TS nos da un error
// index.tsx
import { NextPage } from 'next';
import Head from 'next/head'
import { RandomFox } from '@/components/RandomFox';
const random = (): number => Math.floor(Math.random() * 123) + 1;
const Home: NextPage = () => {
return (
<>
<Head>
<title>React con TypeScript</title>
<meta name="description" content="Generated by me" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<RandomFox alt='zorrito' image={`https://randomfox.ca/images/${random()}.jpg`} />
{/* Si tenemos que mandar otra prop hay que definirla en nuestro tipo Props */}
</main>
<footer>
El mejor footer de la historia
</footer>
</>
)
}
export default Home;
Enemigo: Any
Recuerden que any es el enemigo🤣
Any = PELIGRO!!!
CÓMO TIPAR UN CHILDREN:
https://blog.logrocket.com/using-react-children-prop-with-typescript/
Recordemos que children es una propiedad que viene dentro del objeto prop
EJEMPLO 1:
Aquí vemos que le paso la etiqueta <figcaption> como children a <RandomFox>
import { RandomFox } from '@/components/RandomFox';
const randomNum = ()=> Math.floor(Math.random()*123 + 1);
export default function Home() {
return (
<div>
<main>
<p>Chikorita Papu!!</p>
<RandomFox img={randomNum()}>
<figcaption>Fox image</figcaption> //children
</RandomFox>
</main>
</div>
)
}
Ahora veamos el componente como se ve:
Vemos que, usando un alias creo el type props y este guarda la propiedad img y la propiedad children; img es tipado como number en mi caso y children es tipado como JSX.Element. De esta manera no obtenemos error.
type props = {
img: number;
children: JSX.Element;
}
function RandomFox({img, children}: props ) : JSX.Element{
return (
<figure>
<img src={`https://randomfox.ca/images/${img}.jpg`} alt="fox img"
width={320} height={"auto"} className="mt-3"/>
{children}
</figure>
)
}
export {RandomFox}
¿Y si queremos más de un hijo? Recordemos que más hijos forman un array de hijos.
<RandomFox img={randomNum()}>
<figcaption>Fox image</figcaption>
<p>Other child</p>
</RandomFox>
En el componente sólo debemos decir que queremos que nuestro children admita también un array de JSX.Element.
type props = {
img: number;
children: JSX.Element | JSX.Element[];
}
function RandomFox({img, children}: props ) : JSX.Element{
return (
<figure>
<img src={`https://randomfox.ca/images/${img}.jpg`} alt="fox img"
width={320} height={"auto"} className="mt-3"/>
{children}
</figure>
)
}
export {RandomFox}
Al menos así entendí como se debe hacer, espero correcciones si son necesarias.
Hay dos formas para poder enviar los props, sin embargo el tiparlo es la más recomendada y fácil de mantener.
Está es la forma recomendada y estándar, ya que es más especifica.
type Props = {
image: string,
}
// destructing de las props es mejor
export const RandomFox = ({image}: Props): JSX.Element => {
return (
<img src={image} width="420" height='auto' className="rounded" />
)
}
Aún no es la recomendada es otra opción.
type Props = {
image: string,
}
export const RandomFox = (props: Props): JSX.Element => {
return (
<img src={props.image} width="420" height='auto' className="rounded" />
)
}
Está es otra forma pero no se recomienda su uso ya que es díficil de mantener.
export const RandomFox = (props: {image: string}): JSX.Element => {;
return (
<img src={props.image} width="420" height='auto' className="rounded" />
)
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?