LuisLlamas Logo
ES
typescript-arrays

Uso del Array en TypeScript

  • 4 min
  • Iniciación

En TypeScript, un Array es una colección ordenada de elementos, que pueden ser de cualquier tipo (aunque generalmente son homogéneos).

TypeScript proporciona varias formas de declarar y manipular arrays, haciendo que el manejo de colecciones de datos sea bastante cómodo y sencillo.

Si quieres aprender más sobre Qué son los Arrays
consulta el Curso de Introducción a la Programación leer más

Existen dos sintaxis principales para declarar un array en TypeScript. La más habitual es empleando corchetes ([]), de la siguiente forma.

let numeros: number[] = [1, 2, 3, 4, 5];
let palabras: string[] = ["TypeScript", "JavaScript", "Node.js"];

Alternativamente podemos usando la Clase Genérica Array<T>

let numeros: Array<number> = [1, 2, 3, 4, 5];
let palabras: Array<string> = ["TypeScript", "JavaScript", "Node.js"];

Generalmente usaremos la primera, salvo en algún caso avanzado (como factorías) en las que deberemos usar el segundo

Arrays multidimensionales

Los arrays multidimensionales (matrices) se pueden declarar anidando arrays.

let matriz: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

Iteración sobre arrays

TypeScript soporta la iteración mediante bucles tradicionales y la sintaxis for...of.

for (let i = 0; i < numeros.length; i++) {
    console.log(numeros[i]);
}

for (let num of numeros) {
    console.log(num);
}

Además, disponemos del método forEach, que es un método de Array que cumple la misma función (lo veremos en el siguiente apartado)

Métodos y propiedades de arrays

TypeScript hereda los métodos y propiedades de arrays de JavaScript, por lo que tenemos una gran cantidad de funciones disponibles manipular y operar con arrays.

length

Devuelve el número de elementos en el array.

let numeros: number[] = [1, 2, 3, 4, 5];
console.log(numeros.length);  // 5

push(…elementos)

Añade uno o más elementos al final del array.

numeros.push(6);
console.log(numeros);  // [1, 2, 3, 4, 5, 6]

pop()

Elimina y devuelve el último elemento del array.

let ultimo: number = numeros.pop();
console.log(ultimo);  // 6
console.log(numeros);  // [1, 2, 3, 4, 5]

unshift(…elementos)

Añade uno o más elementos al inicio del array.

numeros.unshift(0);
console.log(numeros);  // [0, 1, 2, 3, 4, 5]

shift()

Elimina y devuelve el primer elemento del array.

let primero: number = numeros.shift();
console.log(primero);  // 0
console.log(numeros);  // [1, 2, 3, 4, 5]

slice(inicio, fin?)

Devuelve una copia superficial de una porción del array.

let subArray: number[] = numeros.slice(1, 3);
console.log(subArray);  // [2, 3]

splice(inicio, numElementos, …elementos?)

Añade o elimina elementos del array.

numeros.splice(2, 1, 99);
console.log(numeros);  // [1, 2, 99, 4, 5]

concat(…arrays)

Combina dos o más arrays.

let otrosNumeros: number[] = [6, 7, 8];
let combinados: number[] = numeros.concat(otrosNumeros);
console.log(combinados);  // [1, 2, 99, 4, 5, 6, 7, 8]

forEach(callback)

Ejecuta una función por cada elemento del array.

numeros.forEach((num) => console.log(num));
// 1
// 2
// 99
// 4
// 5

map(callback)

Crea un nuevo array con los resultados de la llamada a una función aplicada a cada elemento.

let cuadrados: number[] = numeros.map((num) => num * num);
console.log(cuadrados);  // [1, 4, 9801, 16, 25]

filter(callback)

Crea un nuevo array con todos los elementos que pasan una prueba.

let mayoresQueTres: number[] = numeros.filter((num) => num > 3);
console.log(mayoresQueTres);  // [99, 4, 5]

reduce(callback, valorInicial?)

Aplica una función a un acumulador y cada valor del array (de izquierda a derecha) para reducirlo a un solo valor.

let suma: number = numeros.reduce((acumulador, num) => acumulador + num, 0);
console.log(suma);  // 111

Ejemplos prácticos

Encontrar elementos duplicados

function encontrarDuplicados(arr: number[]): number[] {
    let duplicados: number[] = [];
    let contador: { [key: number]: number } = {};

    arr.forEach((num) => {
        contador[num] = (contador[num] || 0) + 1;
    });

    for (let num in contador) {
        if (contador[num] > 1) {
            duplicados.push(Number(num));
        }
    }

    return duplicados;
}

let numeros: number[] = [1, 2, 3, 4, 5, 2, 3, 4];
console.log(encontrarDuplicados(numeros));  // [2, 3, 4]

Ordenar un array de objetos

interface Persona {
    nombre: string;
    edad: number;
}

let personas: Persona[] = [
    { nombre: "Luis", edad: 25 },
    { nombre: "Ana", edad: 22 },
    { nombre: "Luis", edad: 30 }
];

personas.sort((a, b) => a.edad - b.edad);
console.log(personas);
// [
//     { nombre: "Ana", edad: 22 },
//     { nombre: "Luis", edad: 25 },
//     { nombre: "Luis", edad: 30 }
// ]

En esta página