TypeScript, Next.js

TypeScript es un lenguaje de programación desarrollado por Microsoft que se basa en JavaScript. Añade características adicionales al JavaScript estándar y proporciona una forma de escribir código más robusto y escalable.

Vventajas de usar TypeScript:

1. Tipado estático: Permite detectar errores en tiempo de compilación y brinda mayor seguridad al código.
2. Mayor productividad: Proporciona un mejor soporte para autocompletado, detección de errores y resaltado de código.
3. Escalabilidad y mantenibilidad: Facilita el manejo de proyectos grandes y complejos gracias a la definición de interfaces y tipos personalizados.
4. Compatibilidad con JavaScript: Permite aprovechar el código JavaScript existente sin necesidad de reescribirlo.
5. Orientación a objetos: Admite programación orientada a objetos, lo que facilita la estructuración del código.
6. Soporte y comunidad activa: Cuenta con el respaldo de Microsoft y una comunidad de desarrolladores activa, lo que garantiza recursos y herramientas disponibles.

Veamos el siguiente ejemplo en Next con TypeScript, esta app, básicamente, se pueden agregar imágenes de zorros de forma aleatoria, pero lo haremos aplicando "lazy loading", es decir, cargar las imágenes de manera progresiva en la web. En lugar de cargar todas las imágenes al mismo tiempo, se cargan solo aquellas que son visibles en la pantalla o área del navegador en un momento dado.

Analicemos el código

• En el componente const Home: () => JSX.Element en TypeScript se utiliza para indicar el tipo de una función llamada que devuelve un elemento JSX. Un elemento JSX puede ser un componente, un elemento HTML o cualquier otro tipo de elemento utilizado en la construcción de interfaces de usuario en React.

• El tipo ImageItem se utiliza para representar un objeto con dos propiedades: id y url, ambas propiedades son de tipo string, luego, con la siguiente sintaxis <Array<ImageItem>> estamos indicando que este useState recibe un array con las propiedades de ImageItem
• La función  generateId con la sintaxis (): string al final de la declaración indica que esta función no acepta ningún argumento (()) y devuelve un valor de tipo string.

• Para esta parte se ha realizado un import type { MouseEventHandler } from "react"; con esto se habilita su uso en el código para proporcionar una anotación de tipo adecuada para el controlador de eventos utilizado en el botón.
• Luego en la función addNewFox() MouseEventHandler<HTMLButtonElement>, lo que indica que es un controlador de eventos de mouse específico para elementos de tipo <button> en HTML

Dentro de la función addNewFox, se crea un nuevo objeto newImageItem de tipo ImageItem, utilizando una URL basada en:

• Luego, se utiliza setImages para actualizar el estado images agregando el nuevo objeto newImageItem al array existente utilizando la sigueinte sintaxis [...images, newImageItem].
• Al presionar el botón, hacemos el llamado a la función addNewFox(), y esto hace que en la pantalla de la aplicación se renderice una imagen

• images.map(({ id, url }, index) => (...): Esto itera sobre cada elemento del array images y desestructura las propiedades id y url de cada elemento. También se proporciona un índice para cada iteración.
• En el componente LazyImage se ha pasado una serie de props las cuales deben ser definidas con typeScript en dicho componente, pero ya lo analizaremos más adelante, también se ha utilizado la prop onClick para aplicar un console.log cuando se haga click en dicha imagen
• Esta prop onLazyLoad establece una función de devolución de llamada que se ejecuta cuando la imagen se carga de forma diferida (lazy load). En este caso, imprime un mensaje en la consola indicando el número de imagen cargada y el nodo de la imagen.

Analicemos el componente LazyImage:

Analicemos la siguiente sesión de código

• import type { ImgHTMLAttributes } from "react"; esto permite que TypeScript conozca y comprenda los atributos válidos de una etiqueta <img> en HTML
• const node = useRef<HTMLImageElement>(null); al especificar el tipo genérico <HTMLImageElement>, se le está indicando a TypeScript que esta referencia se espera que haga referencia a un elemento <img> en el DOM. Esto permite que TypeScript realice verificaciones de tipos y proporciona autocompletado y sugerencias de código adecuadas para las propiedades y métodos disponibles en un elemento de imagen
• En los tipos LazyImageProps y ImageNative se definen las propiedades esperadas por el componente LazyImage y los atributos nativos de una etiqueta <img> en HTML
• Luego se combina el tipo ImageNative con LazyImageProps para formar el tipo Props
• El componente LazyImage toma las props de tipo Props y desestructura las propiedades src y onLazyLoad, mientras recoge cualquier prop adicional en imgProps, esto permite a TypeScript realizar verificaciones de tipo precisas y proporcionar asistencia de desarrollo adecuada.

• Se utiliza el estado currentSrc y su función setter setCurrentSrc para controlar la URL de la imagen que se muestra en el componente LazyImage.
• Se utiliza el hook useEffect para crear un observador de intersección que detecta cuándo el componente LazyImage se vuelve visible en la ventana del navegador.
• Cuando el componente se vuelve visible, se actualiza el estado currentSrc con la URL de la imagen a cargar.
• Si se proporciona una función onLazyLoad, se llama a esa función pasando la referencia node.current como argumento.
• Se renderiza un elemento <img> con la referencia node, la URL de la imagen actualizada, el atributo alt y se propagan otras props adicionales.

Digamos que aquí es donde se implementa la funcionalidad de carga diferida de imágenes en el componente LazyImage. Muestra una imagen por defecto y, cuando el componente se vuelve visible en la ventana del navegador, carga la imagen real y ejecuta la función onLazyLoad, si se proporciona.

Para finalizar te dejo el link del repositorio del código y de la documentación de TypeScript para seguir indagando sobre el tema: