typescript-tuplas

Uso de Tuplas en TypeScript

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.

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