Lección 74 — Arrays y Tuplas

🧠 Concepto

TypeScript ofrece dos formas principales de trabajar con colecciones ordenadas: arrays (listas de un mismo tipo) y tuplas (listas de longitud y tipos fijos).

Arrays

Se declaran con tipo[] o con la sintaxis genérica Array<tipo>:

let nombres: string[] = ['Ana', 'Luis', 'Pedro'];
let numeros: Array<number> = [1, 2, 3];

Ambas son equivalentes. La primera es más común y legible.

Tuplas

Una tupla es un array con longitud fija y tipos específicos por posición:

let usuario: [string, number] = ['Ana', 25];
// posición 0: string, posición 1: number

Tuplas opcionales y rest

Puedes marcar elementos como opcionales con ?:

let coordenada: [number, number, string?] = [10, 20];
coordenada = [10, 20, 'norte']; // también válido

Usar elementos rest (...) para indicar un número variable de elementos del mismo tipo:

let lista: [string, ...number[]] = ['edades', 25, 30, 35];

Tuplas etiquetadas (TS 4.0+)

Puedes nombrar cada posición para mejorar la legibilidad:

let rango: [inicio: number, fin: number] = [10, 20];

readonly

Evita mutaciones con readonly:

let colores: readonly string[] = ['rojo', 'verde', 'azul'];
// colores.push('amarillo'); ❌ Error

💻 Ejemplo

// Arrays
let frutas: string[] = ['manzana', 'pera', 'uva'];
frutas.push('naranja');  // ✅
let primera = frutas[0]; // tipo: string

// Tuplas
let persona: [string, number, boolean] = ['Ana', 30, true];
let nombrePersona = persona[0]; // tipo: string
let edadPersona = persona[1];   // tipo: number

// Tupla etiquetada
let respuesta: [codigo: number, mensaje: string] = [200, 'OK'];

// Tupla con opcional
let entrada: [string, number?] = ['admin'];
entrada = ['admin', 1234]; // ambos válidos

// Tupla readonly
let punto: readonly [number, number] = [5, 10];
// punto[0] = 3; ❌ Error: Index signature in type 'readonly [number, number]' only permits reading

📝 Ejercicio

Declara una tupla etiquetada llamada producto con: nombre (string), precio (number), y disponible (boolean). Inicialízala con valores reales. Luego crea un array de esa tupla representando un catálogo de 3 productos. Recorre el array e imprime cada producto.

⚠️ Nota

Las tuplas no existen en JavaScript. Al compilar, TS las traduce a arrays normales. La verificación de longitud y tipos solo ocurre en tiempo de compilación.

🎯 Tip

Si tienes un array que siempre tendrá exactamente dos elementos de tipos diferentes, usa una tupla en lugar de un array genérico. El código será más expresivo y recibirás mejores advertencias del compilador.