▷ ARRAYS en TypeScript | Úsalas cómo un PRO así

¿Quieres utilizar arrays/arreglos en TypeScript y no sabes por donde empezar? O, quizás, lo que estás buscando es información sobre características o funciones disponible para tratar con los datos de su interior. ¿verdad?

Mi nombre es Aitor Sánchez, hago apps desde 2014, y en este artículo te enseñaré a crear, a enteder y, en definitiva, a cómo utilizar un array en tus proyectos TypeScript de una manera fácil, comprensible y totalmente accionable.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Aquí tienes el artículo resumido en video. Quizás te guste más ver que leer :P

Cómo se define un array en TypeScript

Para definir un Array en TypeScript, lo único que tienes que hacer es usar los corchetes "[]" al final de la definición del tipo de variable que va a contener:

let heroes: string[];

Cómo hemos visto en el ejemplo del video, vamos a usar un array de algunos héroes de Marvel antes de continuar.

let heroes: string[] = [
    "Iron Man",
    "Spiderman",
    "Thor",
    "Hulk",
    "Black Widow",
    "Hawk Eye"
];

Cómo puedes intuir, dentro de esta arrays puedes almacenar colecciones de cualquier tipo de dato ya sea primitivo o por referencia. En el mismo ejemplo, hemos usado cadenas de texto. Ahora hagamos una de primitivos:

let numbers: number[] = [1,2,3,4,5];

Otra manera más de definirlas

También puedes definir un array utilizando el constructor de la clase Array de la siguiente manera:

let listaDeNumeros: Array<number> = [1,2,3,4,5];

Y tendría, exáctamente, la misma utilidad que las anteriores.

Inferencia de tipos también en un Array

La inferencia del tipo en un array se trata de, al igual que en las variables normales, delegar en TypeScript la elección del tipo de dato para el contenido que vas a meter dentro de la colección.

const heroes = ["spiderman", "batman", "wonderwoman"]
heroes.push("superman") //Esto funcionaría bien.

heroes.push(100) //Error: Argument of type "string" is not assignable to parameter of type "number".
let first: string = heroes[0]; //Esto funcionaría bien.

Cómo ves, al intentar meter un número en un array que el propio TypeScript ha inferido cómo string, nos da error.

Cómo se accede a los objetos de un array

Cuando vas poniendo items dentro de un arreglo, el mismo sistema va asignando un índice a cada uno de ellos. Dicho índice se incrementa con cada uno más que agregas, y disminuye con cada uno que quitas (esto lo vamos a ver a continuación).

Para acceder a un elemento en concreto, debes de conocer su índice dentro de dicha colección.

Para acceder a él lo haremos de la siguiente manera:

let segundoHeroe: string = heroes[2]; //Donde dos es el índice del array al que queremos acceder.

Para más ejemplo, vas a acceder a uno de estos índices y lo vamos a mostrar por la consola de desarrollo:

console.log(heroes[2]); //Imprimiría Spìderman
console.log(segundoHeroe); //Este también imprimiría Spiderman

¿Se puede modificar su contenido?

Al tratarse de variables contenidas dentro de una variable más grande, o colección, por supuesto que se puede modificar.

Para ello solo tendrías que hacer lo siguiente:

//Esto modificará su contenido.
heroes[2] = "Peter Parker";
console.log(heroes[2]); //Ahora imprimirá Peter Parker

Es muy sencillo. Cabe decir que, si es un array que almacena strings no puedes meter un number dentro. Vamos, que no puedes cambiar el tipo de dato, pero si el valor de este.

El atributo Readonly

Por otro lado, puedes prevenir que el array sea editado después de haber sido creado e inicializado. Evitando así problemas futuros en la estructura del programa por modificaciones indebidas.

Para hacer esto, de manera explícita, tienes que agregarle el atributo "readonly" en la definición del tipo de dato que va a contener el array así:

const names: readonly string[] = ["Aitor"];
names.push("Jesús"); //Error: Property "push" does not exist on type "readonly string[]".
// Try removing the readonly modifier and see if it works?

Cómo agregar y eliminar elementos

Esta seguramente sea la pregunta que más se pase por tu cabeza. Lo sé porque a mí me pasó. ¿Puedo agregar elementos a un array después de haberla definido? Pues claro, faltaría más.

Para tal fin, vas a hacer uso de dos funciones de las que disponen las variables de tipo array. Es posible que aún no sepas lo que son las funciones, porque aún no lo he explicado en el diccionario del programado, pero fíate de mí que se hace así. Más adelante veremos lo que son.

//Agregamos un elemento al final del array:
heroes.push("Scarlet Witch");

//Eliminamos el último elemento del array:
heroes.pop();

Cómo has visto en el ejemplo, usamos las funciones “pop” y “push”:

pop -> Te permite eliminar el último elemento que hay en el array.
push -> Te permite agregar un elemento al final del array.

Hay más métodos para agregar y quitar elementos, pero de momento nos vamos a quedar con estos dos, que son los principales que tienes que conocer cuando trabajas con arrays.

Conocer la longitud de un array en TypeScript

Esto es muy útil cuando, por ejemplo, vas a recorrerla con un bucle para imprimir en consola el nombre de los héroes que hemos visto en el video.

console.log(heroes.length); //Imprimirá cuantas cadenas de texto que hay dentro del array

Aunque es posible que no entiendas el código, o quizás sí, lo que me importa de lo que has visto es la llamada a la propiedad “length”. Esta propiedad es la que va a contener dicho número que tiene el valor de la cantidad de objetos que hay dentro del array.

Nota: Es importante que sepas que, dependiendo del lenguaje, dicha propiedad “length” también podría ser una función. O, más diferente aún, podría llamarse “size”.

Funciones disponibles de un array

Los arreglos/arrays, cómo cualquier otro objeto, dispone de funciones/métodos que puedes utilizar para manipular los datos que contienen. Vamos a pasar a verlos y a explicarte cada uno de ellos a nivel informativo. Vamos:

concat -> Devolverá un array con los nuevos valores que le pasemos cómo parámetros a esta función. Dichos parámetros podrán ser un valor suelto u otra array con valores del mismo tipo de dato:
- concat(value1, value2, value3, ..... , valueN);

var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3]; 
var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric ); 

//ouput: alphaNumeric : a,b,c,1,2,3

every -> Nos permite conocer, mediante una función dada que tiene que devolver un booleano, si todos los elementos del array pasan la prueba. Es mejor verlo que explicarlo:
- every(callback[, thisObject]);

function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
          
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed );

//Ouput: Test Value : false

- Cómo puedes apreciar, la función evalúa si todos los elementos del array son mayores que 10. En caso afirmativo, la prueba pasar, negativo en caso contrario. La verdad, es una función de mucha utilidad.

filter -> Devolverá un array con el contenido que pase correctamente por la función de filtro. Dicha función de filtro tendrá el mismo funcionamiento que la función "every".
- filter (callback[, thisObject]);

function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
          
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed );

//Ouput: Test Value :12,130,44

forEach -> Nos permite recorrer todos los índices de un array mediante una función callback. Dicha función tendrá como parámetro el valor del índice del array según se vaya ejecutando de manera secuencial.
- forEach(callback[, thisObject]);

let num = [7, 8, 9];
num.forEach(function (value) {
  console.log(value);
}); 

//Ouput:
//7
//8
//9

- Hay que tener especial cuidado con esto. Se ejecutará de manera asíncrona y no detendrá el flujo de ejecución de la aplicación a menos que nosotros se lo indiquemos explícitamente.

indexOf -> Nos devolverá el índice donde se encuentra el valor dado cómo parámetro. Devolverá -1 en caso de que no exista. El parámetro "fromIndex" nos permite definir desde que índice del array comenzar siendo 0 el valor por defecto:
- indexOf(searchElement[, fromIndex]);

var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index );

//Ouput: index is : 2

join -> Nos permite convertir el contenido del array en una cadena de texto con un separador que le daremos a la función como parámetro:
- join(separator);

var arr = new Array("First","Second","Third"); 
          
var str = arr.join(); 
console.log("str : " + str );  
          
var str = arr.join(", "); 
console.log("str : " + str );  
          
var str = arr.join(" + "); 
console.log("str : " + str );

//Ouput:
//str : First,Second,Third 
//str : First, Second, Third 
//str : First + Second + Third

lastIndexOf -> Similar a indexOf pero comenzando por el final del array en dirección al comienzo de esta. Nos devolverá le número del índice donde se encuentra el valor dado como parámetro. El parámetro "fromIndex" nos permite definir un offset desde donde comenzará a contar.
- lastIndexOf(searchElement[, fromIndex]);

var index = [4, 12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );

//Ouput: index is : 2

map -> Devolverá un array con los valores que retorna la función dada cómo parámetro por cada uno de los elementos del array.
- map(callback[, thisObject]);

var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
console.log("roots is : " + roots );

//Ouput: roots is : 1,2,3

- Cómo se puede apreciar en la salida, los valores del array roots son las raíces cuadradas de los valores del array numbers.

pop -> Eliminará el último elemento disponible en el array.
- pop();

var numbers = [1, 4, 9]; 
          
var element = numbers.pop(); 
console.log("element is : " + element );  
          
var element = numbers.pop(); 
console.log("element is : " + element );

//Ouput:
//element is : 9 
//element is : 4

push -> Esta función insertará los elementos dados cómo parámetro al final del array y devolverá la nueva longitud del array.
- push(element1, element2, ..., elementN);

var numbers = new Array(1, 4, 9); 
var length = numbers.push(10); 
console.log("new numbers is : " + numbers );  
length = numbers.push(20); 
console.log("new numbers is : " + numbers );

//Ouput: 
//new numbers is : 1,4,9,10 
//new numbers is : 1,4,9,10,20

- El valor de la variable length será de 4 y 5 respectivamente.

reduce -> Este método aplica una función simultáneamente contra dos valores de la matriz (de izquierda a derecha) para reducirla a un solo valor. El parámetro "initalValue" será el valor inicial al que se empezará a sumar.
- reduce(callback[, initialValue]);

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );

//Ouput: total is : 6

reduceRight -> Similar a "reduce" pero comenzará a reducir de derecha a izquierda.
- reduceRight(callback[, initialValue]);

var total = [0, 1, 2, 4].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );

//Ouput: total is : 7

reverse -> Esta función devolverá una copia del array pero con los elementos al revés. El primero pasando a ser el último, y viceversa.
- reverse();

var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );

//Ouput: Reversed array is : 3,2,1,0

shift -> Elimina el primer elemento del array.
- shift();

var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );

//Ouput: Shifted value is : 10

slice -> Nos permite extraer una porción del array en cuestión. El parámetro "begin" es el índice desde el que partirá y "end" donde terminará. Si "end" no existe la función devolverá desde "begin" hasta el final del array.
- slice( begin [,end] );

var arr = ["orange", "mango", "banana", "sugar", "tea"]; 
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) );  
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );

//Ouput:
//arr.slice( 1, 2) : mango 
//arr.slice( 1, 3) : mango,banana

some -> Nos permite conocer si alguno de los elementos del array pasa la prueba que le especificaremos en la función dada como parámetro.
- some(callback[, thisObject]);

function isBigEnough(element, index, array) { 
   return (element >= 10); 
          
} 
          
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
console.log("Returned value is : " + retval ); 
          
var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval );

//Ouput:
//Returned value is : false 
//Returned value is : true

- A diferencia de "every", que tienen que ser todos los valores para que pase el test, la función "some" basta con que solo sea un valor para que pase dicho test.

sort -> Nos permite ordenar un array mediante la comparación sobre una función dada.
- sort( compareFunction );

var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );

//Ouput: Returned string is : banana,mango,orange,sugar

- Al no pasarle una función de ordenación, y ser cadenas de texto los valores, los ordenará alfabéticamente.

splice -> Nos permite modificar el contenido de los elementos de un array. Los nuevo elementos modificarán el valor de los antiguos elementos. "Index" será el índice desde donde comenzaremos a modificar, "howMany" cuantos elementos se modificarán a partir del index.
- splice(index, howMany, [element1][, ..., elementN]);

var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2, 0, "water");  
console.log("After adding 1: " + arr );  
console.log("removed is: " + removed); 
          
removed = arr.splice(3, 1);  
console.log("After removing 1: " + arr );  
console.log("removed is: " + removed);

//Ouput:
//After adding 1: orange,mango,water,banana,sugar,tea 
//removed is:  
//After removing 1: orange,mango,water,sugar,tea 
//removed is: banana

toString -> Retornará una cadena de texto que contiene un formato legible por un humano de los elementos que contiene dicho array.
- toString();

var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );

//Ouput: Returned string is : orange,mango,banana,sugar

unshift -> Nos permite agregar uno, o más, elementos al comienzo del array y nos retornará la nueva longitud.
- unshift( element1, element2, ..., elementN );

var arr = new Array("orange", "mango", "banana", "sugar"); 
var length = arr.unshift("water"); 
console.log("Returned array is : " + arr );
console.log("Length of the array is : " + length );

//Ouput:
//Returned array is : water,orange,mango,banana,sugar 
//Length of the array is : 5

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Y ahora si, me despido ya. Espero haberte ayudado y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!

ARRAYS en TypeScript | APRENDE a usarlas con estos SENCILLOS puntos