Componentes Genéricos con TS y React

Y con respecto a la charla, me gustaría hablar hoy para darte una explicación sobre los genéricos en un ejemplo práctico. Intentaremos construir una lista seleccionable y luego abordaremos una pequeña limitación sintáctica que puedes enfrentar al usar, al construir tus componentes con genéricos en React y TypeScript.

Entonces empecemos. Como ejemplo, nos gustaría construir una lista seleccionable que nos permita básicamente tomar una lista de elementos de diferentes formas y poder renderizar los elementos en función de los data que pasamos. Pero los data de los elementos pueden ser muy diferentes. Pueden ser, como en esta muestra, las verduras o una lista de personajes de Game of Thrones en este ejemplo específico. Como podemos ver, la lista seleccionable es un pequeño desplegable que en este momento simplemente renderiza una lista de elementos que se pasan y queremos cambiar eso y queremos lograrlo usando los genéricos.

Entonces, si intentamos renderizar un elemento ahora mismo, podemos ver que la lista de elementos es básicamente solo un ID y eso se debe a que el tipo del elemento seleccionado está codificado en duro, predefinido para tener solo un objeto de solo un ID en un objeto de IDs. Y eso no es adecuado para nosotros. Una de las posibilidades de cómo podemos lidiar con esto es usar los genéricos. Es posible que hayas usado los genéricos en solo un TypeScript regular en funciones o en clases o incluso en interfaces y los genéricos básicamente son un parámetro que puedes pasar a un tipo que le permitiría ser genérico.

Entonces, puedes pasar genéricos a los componentes de React de la misma manera que lo haces en las funciones, utilizando estos signos mayor que o menor que y colocando el nombre específico del genérico que deseas usar. Y luego queremos mover eso a nuestras props para que lo pasemos a otras propiedades que usamos, como por ejemplo para los elementos. Queremos usarlo para un elemento seleccionado, para un elemento a renderizar, y así sucesivamente. Además, nos gustaría mantener la forma de este objeto para que contenga un ID. Y para hacer eso, puedes usar el 'extent' con el que queremos que sea un elemento seleccionado, ¿verdad? Entonces, esto ahora nos permite, como puedes ver, acceder para ver qué tipo de objetos, qué tipo de propiedades básicamente tiene el objeto que pasamos a nuestra lista seleccionable. Y queremos probar a renderizar algo para ver si realmente funciona. Así que intentemos con mi etiqueta y tal vez pongamos algún icono que sea accesible aquí. Y boom, ahora deberíamos poder verlo en nuestra aplicación, pero mientras tanto también actualizaré la lista de personajes. Y personaje, bien. Y veamos. Por supuesto, hay algunos errores, pero eso no es un problema para nosotros. Así que aquí puedes ver una lista de verduras y también una lista renderizada de personajes de Game of Thrones. Bien. Y luego pasemos a las limitaciones sintácticas que puedes enfrentar al escribir tus genéricos. Y eso es que no puedes usar, si intentas escribir genéricos en archivos TSX para genéricos. Si intentas escribir genéricos para funciones de flecha en archivos TSX, entonces puedes encontrar que tu TypeScript se quejará y dirá algo como que la sintaxis no es correcta o algo así. Y eso es porque TypeScript entiende esto como una sintaxis regular de TSX. Y hay varias formas de solucionarlo. La primera es restringir tu genérico para que extienda algo. Por ejemplo, T extiende unknown. Podemos ver que ahora todo está bien. Y otra posibilidad es simplemente convertir tu función de flecha en una función regular. Y en este caso puedes ver que el genérico que pasas es correcto y la sintaxis es correcta. Nada se queja. Y todo bien. Genial. Y luego, sí. Pequeño resumen. Entonces, ¿qué son los genéricos? Los genéricos te permiten hacer que los componentes sean genéricos cuando un componente permite operar los datos que se le pasan sin tener una forma definida de los datos. Un ejemplo de esto podría ser un desplegable de selección o podría ser componentes que muestran una lista de elementos de una manera común, cuya forma no está realmente definida. O puede diferir. Y otras cosas adicionales que puedes probar, también puedes usarlo para los componentes de campos de formulario. Y puedes encontrar muchos en varias bibliotecas de componentes en general. Sí, eso es todo. Espero que hayas encontrado algo interesante y que te haya sido útil. Y gracias. Y sigue a Nerd Security.