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", "Juan"],
["edad", 30],
["activo", true]
];
parClaveValor.forEach(([clave, valor]) => {
console.log(`${clave}: ${valor}`);
});
// nombre: Juan
// 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