Arrays y tuplas

Arrays tipados

Los arrays tipados en TypeScript garantizan que todos los elementos de la colección cumplan con un tipo declarado. El compilador verifica cada operación sobre el array y proporciona autocompletado basado en el tipo de los elementos.

Sintaxis de declaración

TypeScript ofrece dos sintaxis equivalentes para declarar arrays tipados:

// Sintaxis con corchetes (recomendada)
const números: number[] = [1, 2, 3, 4, 5];
const nombres: string[] = ["Ana", "Carlos", "Maria"];
const activos: boolean[] = [true, false, true];

console.log(números, nombres, activos);

// Sintaxis con genérico Array<T>
const precios: Array<number> = [10.5, 25.0, 15.75];
const ciudades: Array<string> = ["Madrid", "Barcelona", "Valencia"];

console.log(precios, ciudades);

Ambas formas son identicas en comportamiento. La sintaxis con corchetes es más concisa y se usa con mayor frecuencia.

Inferencia en arrays

TypeScript infiere el tipo de un array a partir de sus elementos iniciales. Para arrays vacios, es necesario anotar el tipo explícitamente:

// Inferencia automática
const temperaturas = [18, 22, 25, 19]; // tipo inferido: number[]
const paises = ["Espana", "Francia"];  // tipo inferido: string[]

// Array vacío: requiere anotación explícita
const tareas: string[] = [];
tareas.push("Compilar proyecto");
tareas.push("Ejecutar tests");

console.log(temperaturas, paises, tareas);

Cuando un array contiene valores de distintos tipos, TypeScript infiere una union:

const mixto = [1, "texto", true]; // tipo inferido: (string | number | boolean)[]

console.log(mixto);

Arrays con union types

Para declarar explícitamente arrays que contengan múltiples tipos, se utiliza la sintaxis de union entre paréntesis:

const valores: (number | string)[] = [1, "dos", 3, "cuatro"];
const puntuaciones: (number | null)[] = [85, null, 92, 78, null];

console.log(valores, puntuaciones);

Operaciones con seguridad de tipos

Los métodos de array mantienen la verificación de tipos. El compilador asegura que las operaciones sean coherentes con el tipo declarado:

const edades: number[] = [25, 30, 35, 28, 42];

const mayoresDe30 = edades.filter(e => e > 30);        // number[]
const edadesDobles = edades.map(e => e * 2);            // number[]
const sumaTotal = edades.reduce((acc, e) => acc + e, 0); // number

edades.push(33);  // Valido: 33 es number
// edades.push("treinta"); // Error: Argument of type 'string' is not assignable

console.log(mayoresDe30, edadesDobles, sumaTotal);

Arrays multidimensionales

Los arrays de arrays se declaran anadiendo niveles adicionales de corchetes:

const matriz: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

const horarios: string[][] = [
  ["09:00", "10:30", "12:00"],
  ["14:00", "15:30", "17:00"]
];

console.log(matriz[1][2]); // 6
console.log(horarios[0][1]); // "10:30"

Arrays de objetos

Los arrays pueden contener objetos con estructura definida mediante tipos o interfaces:

type Producto = {
  nombre: string;
  precio: number;
  stock: number;
};

const catalogo: Producto[] = [
  { nombre: "Teclado", precio: 49.99, stock: 25 },
  { nombre: "Raton", precio: 29.99, stock: 50 },
  { nombre: "Monitor", precio: 299.99, stock: 10 }
];

const disponibles = catalogo.filter(p => p.stock > 0);
const total = catalogo.reduce((acc, p) => acc + p.precio * p.stock, 0);

console.log(disponibles.length, total);

Arrays de solo lectura

Los arrays readonly impiden cualquier modificación después de su creación. Esto es útil para datos de configuración, constantes o valores que no deben cambiar.

Sintaxis con readonly

const meses: readonly string[] = [
  "Enero", "Febrero", "Marzo", "Abril",
  "Mayo", "Junio", "Julio", "Agosto",
  "Septiembre", "Octubre", "Noviembre", "Diciembre"
];

console.log(meses[0]); // "Enero"
// meses.push("Decimotercero"); // Error: Property 'push' does not exist on type 'readonly string[]'
// meses[0] = "Otro";           // Error: Index signature in type 'readonly string[]' only permits reading

Sintaxis con ReadonlyArray

La forma genérica equivalente es ReadonlyArray<T>:

const primosReadonly: ReadonlyArray<number> = [2, 3, 5, 7, 11, 13];

// Solo operaciones de lectura
const suma = primosReadonly.reduce((acc, n) => acc + n, 0);
const filtrados = primosReadonly.filter(n => n > 5);

console.log(suma, filtrados);

Los arrays readonly permiten operaciones que no modifican el array (filter, map, reduce, slice) pero impiden operaciones mutables (push, pop, splice, sort in-place).

Conversión entre arrays mutables y readonly

Un array mutable es asignable a un tipo readonly, pero no al reves:

const datos: number[] = [1, 2, 3];
const datosInmutables: readonly number[] = datos; // Valido

// const nuevosDatos: number[] = datosInmutables; // Error: readonly no es asignable a mutable

console.log(datosInmutables);

Tuplas

Las tuplas son arrays de longitud fija donde cada posición tiene un tipo específico. A diferencia de los arrays regulares, que describen colecciones homogeneas de longitud variable, las tuplas modelan datos con significado posicional.

Declaración básica

const usuario: [string, number] = ["Ana", 25];
const coordenada: [number, number, string] = [40.4168, -3.7038, "Madrid"];
const colorRGB: [number, number, number] = [255, 128, 0];

console.log(usuario, coordenada, colorRGB);

TypeScript conoce el tipo exacto de cada posición:

const producto: [string, number, boolean] = ["Laptop", 899.99, true];

const nombre: string = producto[0];     // TypeScript sabe que es string
const precio: number = producto[1];     // TypeScript sabe que es number
const disponible: boolean = producto[2]; // TypeScript sabe que es boolean

console.log(nombre, precio, disponible);

Tuplas etiquetadas

Las etiquetas en tuplas mejoran la legibilidad sin afectar al comportamiento en tiempo de ejecución:

type Coordenadas = [latitud: number, longitud: number];
type Rango = [minimo: number, maximo: number];
type Empleado = [nombre: string, edad: number, departamento: string];

const madrid: Coordenadas = [40.4168, -3.7038];
const edadValida: Rango = [18, 65];
const dev: Empleado = ["Carlos", 35, "Ingenieria"];

console.log(madrid, edadValida, dev);

Las etiquetas aparecen en el autocompletado del editor y en los mensajes de error, facilitando la comprensión del significado de cada posición.

Tuplas opcionales

Los elementos opcionales se declaran con el operador ?. Solo pueden aparecer al final de la tupla:

type Configuración = [string, number, boolean?];

const básica: Configuración = ["modo", 1];
const completa: Configuración = ["modo", 1, true];

console.log(básica, completa);

function obtenerResultado(): [string, number?] {
  if (Math.random() > 0.5) {
    return ["exito", 42];
  }
  return ["fallo"];
}

const [estado, valor] = obtenerResultado();
console.log(estado, valor);

Tuplas con elementos rest

Los elementos rest permiten que una tupla acepte un número variable de elementos del mismo tipo al final:

type Comando = [string, ...string[]];

const cmd1: Comando = ["git", "commit", "-m", "primer commit"];
const cmd2: Comando = ["npm", "install"];

console.log(cmd1, cmd2);

type Respuesta = [number, boolean, ...string[]];

const respuesta: Respuesta = [200, true, "OK", "Datos recibidos"];

const [código, exito, ...mensajes] = respuesta;
console.log(código);    // 200
console.log(exito);     // true
console.log(mensajes);  // ["OK", "Datos recibidos"]

Tuplas de solo lectura

El modificador readonly impide la modificación de los elementos de la tupla:

const punto: readonly [number, number] = [10, 20];
// punto[0] = 15; // Error: Cannot assign to '0' because it is a read-only property

const apiConfig: readonly [string, number, boolean] = ["localhost", 3000, true];
console.log(apiConfig);

Desestructuración de tuplas

La desestructuración permite extraer los elementos de una tupla en variables individuales:

const empleado: [string, number, string] = ["Maria", 28, "Desarrollo"];

const [nombreEmp, edadEmp, departamento] = empleado;
console.log(nombreEmp, edadEmp, departamento);

// Omitir elementos con _
const [nombre2, , dept] = empleado;
console.log(nombre2, dept);

Casos de uso y diferencias entre arrays y tuplas

Cuando usar arrays

Los arrays son la elección adecuada cuando la colección tiene longitud variable y todos los elementos representan el mismo concepto:

const temperaturas: number[] = [18, 22, 25, 19, 21];
const etiquetas: string[] = ["urgente", "revision", "pendiente"];

// Operaciones típicas de arrays
temperaturas.push(23);
const media = temperaturas.reduce((a, b) => a + b, 0) / temperaturas.length;
console.log(media);

Cuando usar tuplas

Las tuplas son la elección adecuada cuando cada posición tiene un significado diferente y la longitud es fija:

// Funciones que devuelven múltiples valores
function dividir(a: number, b: number): [resultado: number, válido: boolean] {
  if (b === 0) return [0, false];
  return [a / b, true];
}

const [resultado, válido] = dividir(10, 3);
if (válido) {
  console.log("Resultado:", resultado);
}

// Pares clave-valor
type Entrada = [clave: string, valor: number];

const entradas: Entrada[] = [
  ["temperatura", 22],
  ["humedad", 65],
  ["presion", 1013]
];

for (const [clave, valor] of entradas) {
  console.log(`${clave}: ${valor}`);
}

// Representacion de datos estructurados
type RegistroLog = [timestamp: number, nivel: string, mensaje: string];

const logs: RegistroLog[] = [
  [Date.now(), "INFO", "Servidor iniciado"],
  [Date.now(), "WARN", "Memoria al 80%"],
  [Date.now(), "ERROR", "Conexion perdida"]
];

for (const [ts, nivel, msg] of logs) {
  console.log(`[${nivel}] ${msg}`);
}

Diferencias fundamentales

| Caracteristica | Array | Tupla | |---------------|-------|-------| | Longitud | Variable | Fija (o con rest elements) | | Tipos | Mismo tipo para todos | Tipo específico por posición | | Uso principal | Colecciones homogeneas | Datos con significado posicional | | Métodos mutativos | push, pop, splice disponibles | Disponibles pero pueden romper la invariante de longitud |

Las tuplas en TypeScript son una herramienta de tipado que modela estructuras de datos con significado posicional, mientras que los arrays modelan colecciones de elementos del mismo tipo conceptual.