Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Array & Generic
Veamos cómo adaptar la función definida en la lección anterior para que acepte un arreglo como parámetro.
Generalización del Greeting para múltiples usuarios
Ahora supongamos que queremos que este greeting no sirva para saludar solamente a un usuario, sino que sirva para saludar a muchos usuarios.
En ese caso, vamos a crear una función greeting y ya no vamos a recibir un solo usuario, vamos a recibir una lista de usuarios, users.
Uso de Generics para definir el tipo de dato
Lo que vamos a estar recibiendo es un arreglo de usuarios.
¿Cómo indicamos que vamos a recibir un arreglo de usuarios y no un arreglo de números o cadenas? Eso lo indicamos haciendo uso de generics.
Usando generics, podemos indicar el tipo de dato que contiene un arreglo. Por ejemplo, si queremos un arreglo de cadenas, usaremos este símbolo de menor < y mayor > para encerrar el tipo de dato.
En nuestro caso, este arreglo será un arreglo del tipo User.
Implementación en TypeScript
Entonces, lo que haremos acá es iterar y saludar a cada uno de los usuarios.
users.forEach((user) => {
console.log(user.name);
});
Una vez más, gracias a TypeScript obtenemos este autocompletado.
Aquí estamos diciéndole a TypeScript que se trata de un arreglo de usuarios.
Por lo tanto, TypeScript entiende que esta variable user representa a cada usuario y que, por tanto, es posible acceder al atributo name.
Envío del arreglo de usuarios
Ahora aquí tenemos que enviar un arreglo.
El arreglo que vamos a enviar es user, "user2".
Vamos a limpiar aquí los logs y ejecutar nuestro programa.
Allí está.
Tenemos dos saludos y una sola invocación de esta función, pasando un arreglo.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Ahora supongamos que queremos que este greeting no sirva para saludar solamente un usuario sino que sirva para saludar a muchos usuarios. En ese caso vamos a crear una función greeting y ya no vamos a recibir un solo usuario, vamos a recibir una lista de usuarios, users. Entonces lo que vamos a estar recibiendo es un arreglo de usuarios. ¿Cómo indicamos que vamos a recibir un arreglo de usuarios y no un arreglo de números de cadenas? Eso lo indicamos haciendo uso de generics. Usando generics nosotros podemos indicar el tipo de dato que contiene un arreglo, por ejemplo. Si queremos un arreglo de cadenas usaremos este simbolo de menor y mayor para encerrar el tipo de dato. En nuestro caso este arreglo será un arreglo del tipo user y entonces lo que haremos acá es iterar y saludar cada uno de los usuarios. Entonces aquí vamos a escribir users, punto, for each, y por cada user dentro de este arreglo vamos a imprimir su nombre. Una vez más, gracias a TypeScriptm obtenemos este autocompletado. Aquí estamos diciéndole a TypeScript que se trata de un arreglo de usuarios, por lo tanto typescript entiende que esta variable u representa a cada usuario y que por tanto es posible acceder a el atributo name. Ahora aquí tenemos que enviar un arreglo. El arreglo que vamos a enviar es user, coma, "user2". Vamos a limpiar aquí los logs y vamos a ejecutar nuestro programa. Allí está. Tenemos dos saludos, y una sola invocación de esta función, pasando un arreglo.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
12
Array & Generic
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript