En TypeScript, una tupla es un tipo especial de array que permite almacenar un número fijo de elementos con tipos específicos en cada posición.
Las tuplas son útiles cuando sabemos exactamente cuántos y qué tipos de elementos queremos almacenar en una agrupación.
Si quieres aprender más sobre Qué es una Tupla
consulta el Curso de Introducción a la Programación leer más
Para declarar una tupla, se utiliza una sintaxis similar a la de los arrays, pero especificando los tipos de cada elemento entre corchetes.
let tupla: [number, string, boolean];
tupla = [1, "TypeScript", true];
En este ejemplo, la tupla tupla
puede contener un número, una cadena y un valor booleano, en ese orden específico.
Inicialización de tuplas
Las tuplas deben ser inicializadas con el número y tipo exacto de elementos especificados en su declaración.
// Correcto
let tuplaCorrecta: [number, string] = [42, "Hello"];
// Incorrecto
let tuplaIncorrecta: [number, string] = [42]; // Error: Faltan elementos
let tuplaIncorrectaTipos: [number, string] = [42, true]; // Error: Tipos incorrectos
Intentar asignar un número diferente de elementos (más o menos) o elementos de tipos incorrectos causará un error de compilación
Acceso y manipulación de tuplas
Acceso a elementos
Los elementos de una tupla se pueden acceder utilizando el índice (igual que en un array).
let miTupla: [string, number, boolean] = ["TypeScript", 2024, true];
console.log(miTupla[0]); // "TypeScript"
console.log(miTupla[1]); // 2024
console.log(miTupla[2]); // true
Asignación de valores
Se pueden reasignar los valores de los elementos de una tupla utilizando su índice, pero deben mantener el tipo original.
miTupla[1] = 2025; // Correcto
miTupla[2] = false; // Correcto
// Incorrecto
// miTupla[1] = "2025"; // Error: Tipo incorrecto
Desestructuración de tuplas
TypeScript soporta la desestructuración de tuplas lo que permite asignar los valores de una tupla a variables individuales de forma cómoda.
let [lenguaje, año, activo] = miTupla;
console.log(lenguaje); // "TypeScript"
console.log(año); // 2024
console.log(activo); // true
Métodos comunes de arrays en tuplas
Las tuplas heredan varios métodos de arrays, aunque su uso puede ser limitado debido a la naturaleza fija de las tuplas.
push()
Añade un elemento al final de la tupla. Sin embargo, esto puede romper la tupla si se agregan elementos de tipos no esperados.
miTupla.push("nuevo elemento"); // Ahora es [string, number, boolean, string]
pop()
Elimina el último elemento de la tupla.
let ultimoElemento = miTupla.pop(); // "nuevo elemento"
concat()
Combina dos o más tuplas (o arrays).
let miTupla: [string, number, boolean] = ["TypeScript", 2024, true];
let otraTupla: [string, number] = ["Hola", 100];
let combinada = miTupla.concat(otraTupla);
console.log(combinada); // ["TypeScript", 2024, false, "Hola", 100]
Tipos de tuplas avanzados
Tuplas con elementos opcionales
TypeScript permite definir tuplas con elementos opcionales utilizando el símbolo ?
.
let tuplaOpcional: [number, string?, boolean?];
tuplaOpcional = [1];
tuplaOpcional = [1, "Opcional"];
tuplaOpcional = [1, "Opcional", true];
Tuplas con rest elements
Las tuplas también pueden utilizar rest elements (...
) para permitir un número variable de elementos de un tipo específico al final de la tupla.
let tuplaRest: [number, ...string[]];
tuplaRest = [1];
tuplaRest = [1, "a", "b", "c"];
Tuplas como parámetros de funciones
Las tuplas pueden ser muy útiles como parámetros de funciones para asegurar que se reciben un conjunto específico de tipos y en un orden particular.
function procesarTupla(tupla: [string, number, boolean]): void {
let [texto, numero, booleano] = tupla;
console.log(`Texto: ${texto}, Número: ${numero}, Booleano: ${booleano}`);
}
procesarTupla(["TypeScript", 2024, true]);
Ejemplos prácticos
Utilizar tuplas para representar pares clave-valor
let parClaveValor: [string, any][] = [
["nombre", "Luis"],
["edad", 30],
["activo", true]
];
parClaveValor.forEach(([clave, valor]) => {
console.log(`${clave}: ${valor}`);
});
// nombre: Luis
// edad: 30
// activo: true
Retornar múltiples valores desde una función
function calcular(a: number, b: number): [number, number, number, number] {
return [a + b, a - b, a * b, a / b];
}
let [suma, resta, multiplicacion, division] = calcular(10, 2);
console.log(`Suma: ${suma}, Resta: ${resta}, Multiplicación: ${multiplicacion}, División: ${division}`);
// Suma: 12, Resta: 8, Multiplicación: 20, División: 5