¿Cómo hacer componentes genéricos en TypeScript?
TypeScript se ha convertido en una herramienta esencial para desarrollar componentes genéricos dentro de aplicaciones web modernas. El poder definir atributos de manera precisa, facilitar la reutilización de componentes, y evitar errores gracias a su tipado fuerte, son solo algunos de sus beneficios. En este contenido, exploraremos cómo extender un componente para incluir las propiedades de elementos nativos HTML, haciéndolo más robusto y versátil.
¿Qué estrategia seguir para definir componentes con propiedades nativas?
Crear componentes que soporte cada una de las propiedades de un elemento HTML nativo sin definirlas una a una es un desafío común. Sin embargo, existe una manera más eficiente de lograrlo:
<img> pueden ser implementados sin repetir código.import { ImgHTMLAttributes } from "react"; // Definir tipos nativos para una imagen type ImageNativeTypes = ImgHTMLAttributes<HTMLImageElement>; // Combinar los tipos nativos con otros propios del componente type LazyImageProps = { src: string; } & ImageNativeTypes;
¿Cómo manejar eventos y atributos adicionales en un componente extendido?
TypeScript permite agregar atributos genéricos mediante el uso del operador de propagación, haciendo que los eventos como onClick, y otros atributos, se manejen automáticamente.
const LazyImage = ({src, ...imgProps}: LazyImageProps) => { return ( <img src={src} {...imgProps} /> ); };
Este enfoque garantiza que cualquier atributo pasado al componente, como onClick, title, className, entre otros, funcione sin necesidad de especificarlo manualmente en el tipo del componente.
¿Por qué es importante seguir convenciones al definir propiedades?
Adoptar convenciones estándar al construir APIs de componentes con TypeScript no solo promueve la legibilidad y mantenimiento del código, sino que facilita la integración y colaboración en equipos de desarrollo. Aquí algunas razones:
Es en este contexto que pasar de una propiedad personalizada como image a una nativa como src puede parecer un cambio menor, pero en realidad promueve una interoperabilidad más fluida y sencilla dentro de los equipos.
Curso de React.js con TypeScript
Clase 11 / 16
Curso de React.js con TypeScript
Clase 11 / 16
TypeScript se ha convertido en una herramienta esencial para desarrollar componentes genéricos dentro de aplicaciones web modernas. El poder definir atributos de manera precisa, facilitar la reutilización de componentes, y evitar errores gracias a su tipado fuerte, son solo algunos de sus beneficios. En este contenido, exploraremos cómo extender un componente para incluir las propiedades de elementos nativos HTML, haciéndolo más robusto y versátil.
Crear componentes que soporte cada una de las propiedades de un elemento HTML nativo sin definirlas una a una es un desafío común. Sin embargo, existe una manera más eficiente de lograrlo:
<img> pueden ser implementados sin repetir código.import { ImgHTMLAttributes } from "react";
// Definir tipos nativos para una imagen
type ImageNativeTypes = ImgHTMLAttributes<HTMLImageElement>;
// Combinar los tipos nativos con otros propios del componente
type LazyImageProps = {
src: string;
} & ImageNativeTypes;
TypeScript permite agregar atributos genéricos mediante el uso del operador de propagación, haciendo que los eventos como onClick, y otros atributos, se manejen automáticamente.
const LazyImage = ({src, ...imgProps}: LazyImageProps) => {
return (
<img src={src} {...imgProps} />
);
};
Este enfoque garantiza que cualquier atributo pasado al componente, como onClick, title, className, entre otros, funcione sin necesidad de especificarlo manualmente en el tipo del componente.
Adoptar convenciones estándar al construir APIs de componentes con TypeScript no solo promueve la legibilidad y mantenimiento del código, sino que facilita la integración y colaboración en equipos de desarrollo. Aquí algunas razones:
Es en este contexto que pasar de una propiedad personalizada como image a una nativa como src puede parecer un cambio menor, pero en realidad promueve una interoperabilidad más fluida y sencilla dentro de los equipos.
Yo utilice interface y herede de ImgHTMLAttributes<HTMLImageElement>
interface Props extends ImgHTMLAttributes<HTMLImageElement> {
}
con esto ya funcionaría pero tendriamos que validar que src tenga algun valor cada vez que queramos utilizarlo utlizarlo por que en la imagenes src: string | undefined, pero esto lo solucione definiendo src solamente como string
interface Props extends ImgHTMLAttributes<HTMLImageElement> {
src: string
}
Nuestros componentes evolucionan, por lo que es importante crear componentes escalables que puedan tener funcionalidades más complejas en el futuro.. Vamos a ver como podemos hacer que nuestro componente que hemos trabajado sea un componente más global, escalable, y reutilizable.
De RandomFox.tsx a LazyImage.tsx
import { useRef, useEffect, useState } from "react"
type Props = { image: string }
export default function LazyImage( { image }: Props ):JSX.Element {
const node = useRef<HTMLImageElement> (null)
const [src, setSrc] = useState<string>("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=")
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setSrc(image)
}
})
})
if (node.current) {
observer.observe(node.current)
}
return () => {
observer.disconnect()
}
},[image])
return (
<img ref={node} src={src} className="w-80 h-auto rounded-lg bg-gray-300" />
)
}
Listo, ahora supongamos que una de nuestras compañeras desarrolladoras necesita añadir el evento onCLick={} en nuestro componente, veamos como hacer esto:
App.tsx
function App():JSX.Element {
...
return (
<main className="App">
...
{
foxes.map((fox, index) => (
<div key={index} className="p-4">
{/* Esto nos debería dar un error */}
<LazyImage image={fox} **onClick={() => console.log('Hola')}** />
</div>
))
}
</main>
)
}
LazyImage.tsx
// actualizamos los tipos añadiendo el onClick
type Props = { image: string, onClick: () => void }
export default function LazyImage( { image, onClick }: Props ):JSX.Element {
...
return (
<img ref={node} src={src} className="w-80 h-auto rounded-lg bg-gray-300" **onClick={onClick}** />
)
}
Si probamos el componente, veremos que funciona, pero, ¿acaso esto escala? Recordemos que como desarrolladores tenemos que hacer componentes globales, escalables, y reutilizables, por ello, podemos cambiar esto para en caso de que alguna de nuestras compañeras quiera añadir funcionalidad extra, esta sea sencilla de implementar. Veamos como:
LazyImage.tsx
/* Importamos el tipo de dato que nos aparece cuando hacemos hover cualquiera
de los eventos de image (como aprendimos antes) */
import type { ImgHTMLAttributes } from "react"
// Creamos dos nuevos tipos de datos
type LazyImageProps = { image: string }
type ImageNativeTypes = ImgHTMLAttributes<HTMLImageElement>
// Los sumamos, haciendo que estos sean un solo tipo de dato
type Props = LazyImageProps & ImageNativeTypes
// recibimos todas las propiedades que soportamos de img con el spread operator
export default function LazyImage( { image, ...imgProps}: **Props** ):JSX.Element {
return (
{/* todas las propiedades que recibe un img soportan automática e implícitamente */}
<img ... {...imgProps} />
)
}
Ya de esta forma estamos recibiendo todos los parámetros que puede recibir un <img /> en React (title, onClick, className, etc). Y como queremos que nuestro componente sea reutilizable, los estilos y personalización del componente deberían ir en el padre. Vamos a hacer más cambios importantes:
LazyImage.tsx
import { useRef, useEffect, useState } from "react"
import type { ImgHTMLAttributes } from "react"
// actualizamos image para que ahora sea src para no causar confusión
**type LazyImageProps = { src: string }**
type ImageNativeTypes = ImgHTMLAttributes<HTMLImageElement>
type Props = LazyImageProps & ImageNativeTypes
export default function LazyImage( { **src**, ...imgProps }: Props ):JSX.Element {
const node = useRef<HTMLImageElement> (null)
// a src lo cambiaremos a currentSrc paraevitar sobreescritura
const **[currentSrc, setCurrentSrc]** = useState<string>("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=")
// corregimos los datos a recibir
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
**setCurrentSrc(src)**
}
})
})
if (node.current) {
observer.observe(node.current)
}
return () => {
observer.disconnect()
}
},[**src**])
return (
**<img ref={node} src={currentSrc} {...imgProps} />**
)
}
App.tsx
import { useState } from "react"
import LazyImage from "./components/LazyImage"
import type { MouseEvent } from "react"
const random = (num: number):number => {
return Math.floor(Math.random() * num) + 1
}
function App():JSX.Element {
const [foxes, setFoxes] = useState<string[]> ([])
const addNewFox = (event: MouseEvent<HTMLButtonElement>):void => {
event.preventDefault()
const newImage: string = `https://randomfox.ca/images/${random(123)}.jpg`
setFoxes([
...foxes,
newImage
])
}
return (
<main className="App">
<h1 className="text-3xl font-bold text-indigo-600 p-6">Random Fox</h2>
<button onClick={addNewFox} className="">Añadir zorro</button>
{
foxes.map((fox, index) => (
<div key={index} className="p-4">
{/* Utilizamos el atributo src y añadimos la personalización en el componente padre */}
<LazyImage **scr={fox}** className="w-80 h-auto rounded-lg bg-gray-300" onClick={() => console.log('Hola')} />
</div>
))
}
</main>
)
}
export default App
Hemos logrado crear un componente global, escalable, y reutilizable. El cual utiliza las convenciones más convenientes para que nuestro equipo de trabajo tenga una buena experiencia de desarrollo al momento de utilizar nuestro código, haciéndolo fácil de entender y fácil de mantener a lo largo del tiempo.
Me parece más cómodo usar interfaces y extender los atributos del DOM. Pero si es una muy buena manera de entender las mejores prácticas cuando tenemos componentes que son extensiones de los nodos del DOM nativo.
interface LazyImageProps extends HTMLAttributes<HTMLImageElement> {
src: string;
}
// Simplemente usamos parametros rest
export const LazyImage = ({ src, ...rest }: LazyImageProps): JSX.Element => {
// Código...
return <img ref={node} src={currentImage} {...rest} />;
}
```interface LazyImageProps extends HTMLAttributes\<HTMLImageElement> { src: string;}
Tengo este error y no encuentro como darle solución, solamente me pasa cuando le agrego el {...imgProps} en la etiqueta de Image de Nextjs, no estoy usando la configuración que hizo el profesor al principio.
esto es lo que dice el error concretamente
Type 'string | number' is not assignable to type 'SafeNumber | undefined'.ts(2322) image.d.ts(62, 5): The expected type comes from property 'height' which is declared here on type 'IntrinsicAttributes & Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "alt" | ... 5 more ... | "ref"> & { ...; } & RefAttributes<...>'
Excelente Explicacion..
¡Increíble esta clase! Aunque me queda esta duda, esto ya se podía hacer con Vanilla JS?
Lo mejor de platzi !
lo unico malo de esta clase es que ande cambiando nombre de variables o de los componentes, no creo que sea una buena practica, se siente como estar refactorizando todo el tiempo porque usamos palabras reservadas que despues tenemos que cambiar porque coinciden con las de react
<img> en un componente LazyImageSi quisiéramos usar las mismas propiedades del <img> nativo (como onClick, alt, className, etc.) desde nuestra página en un componente LazyImage, el enfoque ingenuo sería tipar una por una dentro del componente 😵💫.
type Props = {
image: string;
onClick: () => void;
};
Esto funciona… hasta que necesitas más props 😬
Imagina agregar alt, loading, decoding, sizes, srcSet, onMouseEnter, etc.
👉 Sería insostenible.
{images.map(({ id, url }) => (
<div className="p-4" key={id}>
<LazyImage
image={url}
onClick={() => {
console.log("hey");
}}
/>
</div>
))}
Y el componente:
export function LazyImage({ image, onClick }: Props): JSX.Element {
return (
<img
ref={node}
width={320}
height="auto"
src={src}
className="rounded bg-gray-300"
onClick={onClick}
/>
);
}
⚠️ Problema: cada nueva prop del <img> debe declararse manualmente.
<img>React ya nos da los tipos correctos para los elementos del DOM 🎉
En este caso: ImgHTMLAttributes<HTMLImageElement>.
👉 Combinamos nuestras props personalizadas con las props nativas del <img>
import { useRef, useEffect, useState } from "react";
import type { ImgHTMLAttributes } from "react";
type LazyImageProps = {
src: string;
};
type Props = ImgHTMLAttributes<HTMLImageElement> & LazyImageProps;
export function LazyImage({ src, ...imgProps }: Props): JSX.Element {
const node = useRef<HTMLImageElement>(null);
const [currentSrc, setCurrentSrc] = useState(
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="
);
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting || !node.current) return;
setCurrentSrc(src);
});
});
if (node.current) observer.observe(node.current);
return () => observer.disconnect();
}, [src]);
return <img ref={node} src={currentSrc} {...imgProps} />;
}
<img>src y no image?Usar src en lugar de inventar una prop nueva es parte de buenas convenciones de diseño de APIs:
<img> nativo📌 Regla de oro:Cuanto más se parezca tu componente a un elemento nativo del DOM, más fácil será usarlo y adoptarlo.
Con este enfoque creamos un componente que:
<img>💡 Un ejemplo perfecto de composición + buenas prácticas en React y TypeScript ✨
ImgHTMLAttributes<HTMLImageElement> NO es pesadoUna duda común es pensar que al extender:
ImgHTMLAttributes<HTMLImageElement>
estamos “trayendo” todas las props del <img> al componente y que eso puede afectar el rendimiento.
👉 Esto NO sucede.
ImgHTMLAttributes existe solo en TypeScript📌 Costo en runtime: 0
TypeScript usa este tipo solo para validar y dar autocompletado, luego desaparece por completo.
...imgProps) NO inventa propsOtro miedo frecuente es pensar que:
<img {...imgProps} />
va a generar un <img> enorme con atributos como title, sizes, decoding, etc., aunque no los usemos.
👉 Esto tampoco ocurre ❌
El spread operator:
Uso del componente:
<LazyImage
src={url}
onClick={() => console.log("click")}
/>
Dentro del componente:
imgProps = {
onClick: () => console.log("click")
}
📌 Eso es todo lo que se pasa al <img>.
HTML resultante:
<img src="fox.jpg">
(Sin alt, sin title, sin atributos extra).
Los tipos describen lo que ES POSIBLE, no lo que EXISTE
ImgHTMLAttributes es como un menú 📜:
Este patrón:
💡 Usar ImgHTMLAttributes<HTMLImageElement> + spread operator es seguro, escalable y recomendado cuando construimos componentes que envuelven elementos del DOM.
Si la respuesta a la pregunta El tipo: type Props = React.ImgHTMLAttributes<htmlimageelement> ¿Qué ventaja tiene? No es "Nos proporciona acceso a todos las propiedades" Entonces, cuál es la respuesta?