TypeScript con React se ha disparado a nuevas alturas en la industria, pero puede ser difícil para los recién llegados aprender a usarlo con React, e incluso los desarrolladores experimentados tienen problemas.
En este artículo, vamos a repasar 4 formas de escribir TypeScript con React que todo desarrollador debería conocer.
Índice de contenido
1. Creación de alias de Type para los accesorios pasados a los componentes
2. Creación de Types para sus Hooks
3. Types de eventos y formularios HTML
4. Cree Types para sus datos procedentes de la respuesta de la API
5. Consejo extra
Creación de alias de Type para los accesorios pasados a los componentes
Creamos types para los accesorios, porque sería una pesadilla construir aplicaciones grandes con muchos desarrolladores trabajando juntos si no lo hiciéramos.
Se tendría que adivinar los types de datos de los props a los que quieres acceder sin él, o buscarlos en la documentación o preguntar. La creación de alias de type hace que pasar props sea 10 veces más fácil, más rápido de desarrollar, y reduce los errores inesperados, entre otras cosas.
Así que hay múltiples maneras de lograr esto, por ejemplo, podrías tener un type de usuario global definido y exportado desde un archivo .d.ts, en ese caso, lo importas y lo usas como el type props para tu componente, la segunda forma es definir los types en el componente en sí mismo justo encima de donde se escribe el código del componente, así es como se hace:
Y también podrías hacer esto:
Creación de types para sus Hooks
Types de useState:
Otra cosa increíble con TypeScript + React es que puedes crear un genérico para el useState y cuando intentas establecer el estado con algún valor, te dirá si el type de datos que estás intentando establecer es incorrecto.
Por ejemplo, si tenemos un objeto grande y creamos un type para él, luego establecemos el type al estado, podremos ver qué tipos hay en el estado cada vez que usemos el valor del estado, y si intentamos establecer el estado con un nuevo valor, nos dirá qué types acepta y nos dirá si algo salió mal al establecer el estado, como por ejemplo si usamos una cadena para el ID en lugar de un número, TypeScript lo detectará por nosotros incluso antes de que se compile.
Así que la forma de lograrlo es haciendo esto:
Lo que estamos haciendo aquí es establecer el estado a un número genérico; aceptará cualquier número pero ninguno más, y si intentamos establecer el estado a cualquier otra cosa, nos dirá cuál es el problema. Incluso puede crear su propio tipo o interfaz para cualquier estado que desee, como definir un alias de tipo para un objeto con muchas propiedades.
Types de useEffect:
Para useEffect, nunca se le coloco un type, porque no devuelve nada y no podemos cambiar nada.
Types de useMemmo:
Para useMemmo, podemos ponerle un type que nos diga lo que devolverá como valor, y en este ejemplo devolverá una cadena.
Types de eventos y formularios HTML
Obviamente, no tienes que especificar un type para cada evento, onClick será inferido por sí mismo porque TypeScript lo hace por ti la mayor parte del tiempo. TypeScript incluye MouseEvent por defecto, así que no hay necesidad de añadirlo manualmente.
Sin embargo, si tu formulario tiene un onSubmit, tendrás que especificar el evento React, así que aquí tienes un ejemplo de un formulario con un onSubmit.
onSubmit:
Por otra parte, si no te importa el type de evento, puedes usar React.SyntheticEvent, pero esto debe usarse cuando no estás seguro del evento, así que la mejor práctica es que si sabes el type, lo uses.
Cree types para sus datos procedentes de la respuesta de la API
¡Esto es extremadamente útil!.
Imagínate recorrer un array de listados inmobiliarios que obtenemos de una api, cada listado con 20 propiedades; ahora imagina hacer esto en vanilla JavaScript, colaborando con otros desarrolladores, y pasando los listados a varios componentes; esto sería un dolor, y podría terminar siendo un desastre con bugs inesperados, por ejemplo:
En el contenedor, mount -> Para obtener listados de inmuebles, haga una solicitud de API -> Pase los datos a un componente de tarjeta como props -> Los props se pasan a un componente HeaderCard desde el componente de tarjeta. Sin los types especificados aquí, sería difícil estar seguro de los types de datos de los bienes inmuebles, y sería difícil dormir por la noche a medida que el proyecto crece.
Simplemente especificarías un type para los datos de la inmobiliaria en TypeScript, y luego declararías el type prop al tipo de usuario en el componente que lo acepta tiene props. Y cuando usted hace data.someProperty en su componente, se puede ver qué type de datos es de inmediato.
¿Cómo lo hacemos? Bastante simple en realidad, creamos un Type para nuestros datos así:
Y en el componente, hacemos esto:
Deberías crear un archivo de typess compartidos donde creas y exportas los types/interfaces que utilizas en tu aplicación.
Consejo extra:
¿Debería usar type o interface en las aplicaciones React?
Si, totalmente hay que usar typefor en las aplicaciones React, por consistencia y por estar restringido. Pero es una preferencia, y está bien usar cualquiera de los dos, pero elige el 1, puedes leer más sobre esto aquí.
Aquí hay una tabla de comparación entre los dos: