Arrays y Tuplas

Arrays tipados y genéricos

Los arrays tipados en TypeScript nos permiten definir colecciones de elementos donde todos los valores deben ser del mismo tipo específico. A diferencia de JavaScript, donde los arrays pueden contener cualquier combinación de tipos, TypeScript nos proporciona seguridad de tipos que previene errores comunes durante el desarrollo.

Declaración de arrays tipados

TypeScript ofrece dos sintaxis principales para declarar arrays tipados. La más común utiliza corchetes después del tipo:

// Sintaxis con corchetes (recomendada)
let numeros: number[] = [1, 2, 3, 4, 5];
let nombres: string[] = ["Ana", "Carlos", "María"];
let activo: boolean[] = [true, false, true];

También existe la sintaxis con generic array type, aunque es menos utilizada:

// Sintaxis alternativa con Array<T>
let numeros: Array<number> = [1, 2, 3, 4, 5];
let nombres: Array<string> = ["Ana", "Carlos", "María"];

Inferencia de tipos en arrays

TypeScript puede inferir automáticamente el tipo de un array basándose en sus elementos iniciales:

// TypeScript infiere que es number[]
let precios = [10.5, 25.0, 15.75];

// TypeScript infiere que es string[]
let ciudades = ["Madrid", "Barcelona", "Valencia"];

// Array vacío requiere tipado explícito
let tareas: string[] = [];

Arrays de tipos mixtos con union types

Cuando necesitamos arrays que contengan múltiples tipos, utilizamos union types:

// Array que puede contener números o strings
let valores: (number | string)[] = [1, "texto", 42, "otro"];

// Array que puede contener números o valores null
let puntuaciones: (number | null)[] = [85, null, 92, 78, null];

Operaciones comunes con arrays tipados

Los métodos de array mantienen la seguridad de tipos, proporcionando autocompletado y verificación en tiempo de compilación:

let temperaturas: number[] = [18, 22, 25, 19, 21];

// Métodos que mantienen el tipo
let temperaturasAltas = temperaturas.filter(temp => temp > 20); // number[]
let temperaturasEnFahrenheit = temperaturas.map(temp => temp * 9/5 + 32); // number[]

// Agregando elementos con tipo seguro
temperaturas.push(24); // ✓ Válido
// temperaturas.push("calor"); // ✗ Error de compilación

Arrays multidimensionales

Para crear arrays de arrays, simplemente añadimos más niveles de corchetes:

// Matriz bidimensional de números
let matriz: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// Array de arrays de strings
let horarios: string[][] = [
  ["09:00", "10:30", "12:00"],
  ["14:00", "15:30", "17:00"]
];

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

Arrays de objetos

Los arrays pueden contener objetos con estructura definida:

// Array de objetos con propiedades tipadas
let usuarios: { nombre: string; edad: number; activo: boolean }[] = [
  { nombre: "Luis", edad: 25, activo: true },
  { nombre: "Carmen", edad: 30, activo: false },
  { nombre: "Roberto", edad: 28, activo: true }
];

// Filtrando usuarios activos
let usuariosActivos = usuarios.filter(usuario => usuario.activo);

Introducción a arrays genéricos

Los arrays genéricos nos permiten crear funciones que trabajen con arrays de cualquier tipo, manteniendo la seguridad de tipos:

// Función genérica que obtiene el primer elemento
function primerElemento<T>(array: T[]): T | undefined {
  return array.length > 0 ? array[0] : undefined;
}

// Uso con diferentes tipos
let primerNumero = primerElemento([1, 2, 3]); // number | undefined
let primeraNombre = primerElemento(["Ana", "Luis"]); // string | undefined

Inicialización y validación de arrays

TypeScript verifica que los valores iniciales coincidan con el tipo declarado:

// Inicialización válida
let edades: number[] = [25, 30, 35, 28];

// Arrays con diferentes niveles de restricción
let coordenadas: [number, number][] = [[0, 0], [1, 2], [3, 4]];

// Array readonly para datos inmutables
let meses: readonly string[] = [
  "Enero", "Febrero", "Marzo", "Abril",
  "Mayo", "Junio", "Julio", "Agosto",
  "Septiembre", "Octubre", "Noviembre", "Diciembre"
];

La declaración readonly impide modificaciones accidentales del array, siendo especialmente útil para datos de configuración o constantes.

Tuplas

Las tuplas representan una estructura de datos que permite almacenar un número fijo de elementos de tipos específicos en posiciones determinadas. A diferencia de los arrays regulares, las tuplas tienen una longitud fija y cada posición puede tener un tipo diferente, proporcionando mayor precisión en la definición de estructuras de datos.

Sintaxis básica de tuplas

La declaración de tuplas utiliza corchetes con tipos específicos para cada posición:

// Tupla básica: [string, number]
let usuario: [string, number] = ["Ana", 25];

// Tupla con tres elementos de tipos diferentes
let coordenada: [number, number, string] = [40.4168, -3.7038, "Madrid"];

// Tupla para representar un color RGB
let colorRojo: [number, number, number] = [255, 0, 0];

Acceso y modificación de elementos

El acceso a elementos de tuplas funciona mediante índices numéricos, igual que en arrays, pero TypeScript conoce el tipo específico de cada posición:

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

// Acceso tipado a elementos
let nombre: string = producto[0];    // TypeScript sabe que es string
let precio: number = producto[1];    // TypeScript sabe que es number
let disponible: boolean = producto[2]; // TypeScript sabe que es boolean

// Modificación con verificación de tipos
producto[0] = "Tablet";     // ✓ Válido: string en posición 0
producto[1] = 1299.99;      // ✓ Válido: number en posición 1
// producto[1] = "caro";    // ✗ Error: string no válido en posición number

Tuplas opcionales

TypeScript permite definir elementos opcionales en tuplas utilizando el operador de interrogación:

// Tupla con elemento opcional
let configuracion: [string, number, boolean?] = ["modo", 1];

// También válido con el tercer elemento
let configuracionCompleta: [string, number, boolean?] = ["modo", 1, true];

// Función que retorna tupla opcional
function obtenerDatos(): [string, number?] {
  return Math.random() > 0.5 ? ["datos", 42] : ["datos"];
}

Tuplas con elementos rest

Las tuplas pueden incluir elementos rest para aceptar un número variable de elementos del mismo tipo al final:

// Tupla con rest elements
let comando: [string, ...string[]] = ["ejecutar", "arg1", "arg2", "arg3"];

// Tupla mixta con rest
let respuesta: [number, boolean, ...string[]] = [200, true, "OK", "Success"];

// Desestructuración con rest
let [status, exito, ...mensajes] = respuesta;
console.log(status);   // 200
console.log(mensajes); // ["OK", "Success"]

Tuplas de solo lectura

Para crear tuplas inmutables, utilizamos el modificador readonly:

// Tupla readonly
let punto: readonly [number, number] = [10, 20];

// punto[0] = 15; // ✗ Error: no se puede modificar tupla readonly

// Útil para configuraciones constantes
const API_CONFIG: readonly [string, number, boolean] = ["localhost", 3000, true];

Desestructuración de tuplas

La desestructuración permite extraer elementos de tuplas de manera elegante:

let empleado: [string, number, string] = ["Carlos", 35, "Desarrollador"];

// Desestructuración básica
let [nombreEmpleado, edadEmpleado, cargoEmpleado] = empleado;

// Desestructuración parcial
let [nombre, , cargo] = empleado; // Omite la edad

// Con valores por defecto
let [nom, edad = 0, puesto = "Sin asignar"] = empleado;

Tuplas con tipos union

Las tuplas pueden combinar tipos union para mayor flexibilidad:

// Tupla con tipos union
let evento: [string, number | string] = ["click", 123];

// También válido
evento = ["hover", "elemento-id"];

// Tupla para representar diferentes tipos de respuesta
type RespuestaAPI = [number, "success" | "error", string?];

let respuestaExito: RespuestaAPI = [200, "success"];
let respuestaError: RespuestaAPI = [404, "error", "No encontrado"];

Casos de uso prácticos

Las tuplas son especialmente útiles para representar datos estructurados con significado posicional:

// Coordenadas geográficas
type Coordenadas = [number, number]; // [latitud, longitud]
let ubicacion: Coordenadas = [40.4168, -3.7038];

// Rangos de valores
type Rango = [number, number]; // [min, max]
let edadValida: Rango = [18, 65];

// Respuestas de funciones con múltiples valores
function dividir(a: number, b: number): [number, boolean] {
  if (b === 0) return [0, false];
  return [a / b, true];
}

let [resultado, exito] = dividir(10, 2);

Tuplas nombradas

TypeScript permite etiquetar elementos de tuplas para mejorar la legibilidad:

// Tupla con etiquetas descriptivas
type Usuario = [nombre: string, edad: number, activo: boolean];

let usuario: Usuario = ["María", 28, true];

// Las etiquetas no afectan el comportamiento, solo documentan
let [nombreUsuario, edadUsuario, estadoUsuario] = usuario;

Diferencias clave con arrays

Las tuplas se distinguen de los arrays en varios aspectos fundamentales:

• Longitud fija: Las tuplas tienen un número específico de elementos
• Tipos por posición: Cada posición puede tener un tipo diferente
• Semántica: Cada elemento tiene un significado específico por su posición
• Verificación estricta: TypeScript verifica tanto tipos como longitud

// Array: longitud variable, mismo tipo
let numeros: number[] = [1, 2, 3, 4]; // Puede crecer o decrecer

// Tupla: longitud fija, tipos específicos por posición
let punto: [number, number] = [10, 20]; // Siempre exactamente 2 elementos