TypeScript arrays: cómo crearlos y manipularlos
Equipo editorial de IONOS5 mins
La tipificación estática permite al compilador de TypeScript hacer un seguimiento del tipo de datos de los elementos del array. De esta forma, los arrays de TypeScript reducen la propensión a errores en el código, lo que permite desarrollar aplicaciones más seguras y fiables.
¿Qué son los TypeScript arrays?
Los TypeScript arrays son listas ordenadas de valores. Al igual que en JavaScript, puedes usarlos para almacenar una colección de elementos. Estos elementos pueden ser de diferentes tipos de datos, incluidos números, cadenas, objetos u otros arrays. TypeScript tiene la ventaja de soportar tipado estático, por lo que puedes especificar el tipo de datos de los elementos en un array. De esta forma, se mejorará la detección de errores durante el desarrollo.
Una característica crucial de los arrays es que su tamaño es dinámico, lo que permite añadir o eliminar elementos sin necesidad de determinar el tamaño de antemano. Los arrays de TypeScript son mutables por defecto. No obstante, puedes crear arrays inmutables, que pueden usarse para generar nuevos arrays basados en los existentes, utilizando métodos como map y filter. Los arrays simplifican las tareas de filtrar, ordenar e iterar sobre elementos, y ofrecen una estructura consistente para organizar datos.
Además, los arrays de TypeScript pueden utilizarse como base para implementar estructuras de datos como pilas (Last-In-First-Out o LIFO) y colas (First-In-First-Out o FIFO). También son adecuados para representar listas, tablas y colecciones en muchas aplicaciones. La capacidad de gestionar fácilmente elementos del mismo tipo hace que los arrays sean especialmente útiles para procesar datos de fuentes externas, ya sea de API o bases de datos.
La sintaxis de los TypeScript arrays
En TypeScript, los arrays se declaran utilizando las palabras clave let, const o var seguidas de un nombre de variable y una especificación del tipo de datos. La especificación del tipo de datos se realiza después de escribir dos puntos y define qué tipo de datos deben tener los elementos en el array. Estos elementos se colocan dentro de corchetes y se separan por comas dentro de un bloque de inicialización del array.
Así es la sintaxis general para declarar TypeScript arrays:
const variableName: datatype[] = [element1, element2, ...];- variableName es el nombre que le quieras poner al array.
- datatype indica qué tipo de datos deben tener los elementos en el array.
- [element1, element2, …] son los elementos o valores que deben almacenarse en el array. Estos elementos deben tener un tipo de dato definido de antemano.
A continuación, te dejamos varios ejemplos de esta sintaxis:
// Data type: Number
const numbers: number[] = [1, 2, 3, 4, 5];
// Data type: String
const numbers: string[] = ["Alice", "Bob", "Charlie"];
// Data type: Boolean
const booleans: boolean[] = [true, false];Métodos de TypeScript arrays
Los métodos de TypeScript arrays son muy útiles y potentes, ya que te permiten procesar, transformar y organizar datos en arrays de manera eficiente. La siguiente tabla proporciona un resumen de los métodos de array comunes en TypeScript y sus aplicaciones.
| Método | Descripción |
|---|---|
push()
|
Añade uno o más elementos al final del array y devuelve la nueva longitud. |
pop()
|
Elimina el último elemento del array y lo devuelve. |
unshift()
|
Añade uno o más elementos al principio del array y devuelve la nueva longitud del array. |
shift()
|
Elimina el primer elemento del array y lo devuelve. |
concat()
|
Combina el array actual con otro u otros y devuelve un nuevo array. El array original permanece sin cambios. |
join(separator)
|
Convierte los elementos del array en una cadena y la devuelve. Puede especificar un separador para los elementos. |
slice(start, end)
|
Crea una copia plana del array formada por los elementos entre los índices especificados start (inclusive) y end (exclusive). El array original permanece sin cambios.
|
splice(start, deleteCount, element1, element2, ...)
|
Inserta nuevos elementos en la posición especificada y/o elimina elementos del array. |
forEach(callback)
|
Ejecuta una función proporcionada para cada elemento del array. |
map(callback)
|
Genera un nuevo array aplicando una función a cada elemento del array. |
filter(callback)
|
Crea un nuevo array que contiene todos los elementos, para los que la función proporcionada devuelve true.
|
Ejemplos de uso de los TypeScript arrays
Los TypeScript arrays son herramientas indispensables a la hora de organizar y procesar datos en las aplicaciones. Vamos a enseñarte algunos de los pasos más importantes.
Cómo llamar elementos de arrays
Acceder a los elementos de un array en TypeScript es una operación fundamental que permite obtener elementos específicos dentro de un array. Puedes acceder a los elementos del array utilizando su índice, que indica su posición en el array. En TypeScript, la indexación de los arrays comienza desde 0, es decir, el primer elemento tiene un índice de 0 y el segundo elemento tiene un índice de 1.
let myArray: number[] = [10, 20, 30, 40, 50];
// Accessing elements using index
let firstElement: number = myArray[0]; // Output: 10
let secondElement: number = myArray[1]; // Output: 20
let thirdElement: number = myArray[2]; // Output: 30
// Assigning a new value to an array element
myArray[3] = 99; // 4th element in myArray = 99Desestructuración de arrays
Con la desestructuración de arrays en TypeScript, puedes extraer valores de un array de manera rápida y sencilla y asignarlos variables.
let numberArray: number[] = [1, 2, 3];
// Array destructuring
let [firstNumber, secondNumber, thirdNumber] = numberArray;
// Access values
console.log(firstNumber); // Outputs 1
console.log(secondNumber); // Outputs 2
console.log(thirdNumber); // Outputs 3Iteración sobre elementos en TypeScript arrays
Te dejamos a continuación un ejemplo de cómo iterar sobre un array en TypeScript utilizando un bucle for:
let numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}En este código se crea un array llamado numbers que contiene números del 1 al 5. Después, se utiliza un bucle for para iterar sobre cada elemento del array. El bucle comienza en 0 y se aumenta i en cada pasada del bucle. Con numbers[i] se accede al elemento correspondiente del array y se imprime.
Este es el resultado obtenido:
1
2
3
4
5
