📙 Clase 3 — Listas (Arrays, Tuplas, Interfaces y Enums)

TypeScript · 2026-07-11 · Carpeta: 02-Ejercicios/Listas ⬅️ Volver al índice de clases

🎯 Qué aprendí

• Arrays de un solo tipo (string[], number[], boolean[]).
• Arrays mixtos con union types ((string | number | boolean)[]).
• Interfaces para modelar objetos y arrays de objetos (Persona[]).
• Tuplas [string, number, boolean] y arrays de tuplas ([...][]).
• Recorrer listas con forEach y acceder a la tupla por índice (persona[0]).
• Enums (enumerados) para dar nombre a un conjunto de valores.

---

📖 PARTE TEÓRICA

📚 1. Arrays (listas de UN mismo tipo)

Un array es una lista de valores. Se tipa con tipo[] ("lista de tipo"):

let nombres: string[] = ["Juan", "María", "Pedro"];
let edades: number[] = [25, 30, 35];
let booleanos: boolean[] = [true, false, true];

TS vigila el tipo: edades.push("cuarenta") → ❌ error (no es number).

🎨 2. Arrays mixtos (union types)

Si la lista mezcla tipos, se usa (A | B | C)[]:

let mixto: (string | number | boolean)[] = ["Hola", 42, true];

⚠️ Los paréntesis importan: (string | number)[] = lista mixta. Sin paréntesis, string | number[] = "un string o una lista de numbers" — ¡otra cosa!

🧱 3. Interfaces + arrays de objetos

Una interface es un "molde" que define la forma de un objeto: qué propiedades tiene y de qué tipo. Luego puedes hacer una lista de esos objetos con Interface[].

interface Persona {
  nombre: string;
  edad: number;
  esDesarrollador: boolean;
}

let personas: Persona[] = [
  { nombre: "Juan", edad: 25, esDesarrollador: true },
  { nombre: "María", edad: 30, esDesarrollador: false },
];

personas.push({ nombre: "Miranda", edad: 28, esDesarrollador: false }); // ✅
personas.push({ nombre: "Ana" });  // ❌ Error: faltan edad y esDesarrollador

💡 La interface obliga a que cada objeto de la lista tenga exactamente esas propiedades con esos tipos. Es la forma limpia de tipar datos estructurados.

🧪 Entrevista: ¿Para qué sirve una interface? Para describir la forma de un objeto (contrato). Da autocompletado, evita errores de tipeo en las propiedades y documenta los datos.

🎯 4. Tuplas y arrays de tuplas

Una tupla es un array de tamaño fijo donde cada posición tiene su tipo: [string, number, boolean]. Un array de tuplas es una lista de esas: [...][].

// una lista donde CADA elemento es la tupla [nombre, edad, esDev]
let personasT: [string, number, boolean][] = [
  ["Juan", 25, true],
  ["María", 30, false],
];

personasT.push(["Ana", 32, true]);          // ✅ respeta la forma
personasT.push([32, "Ana", true]);          // ❌ orden incorrecto

Se accede a cada valor por índice (empieza en 0):

let fila = personasT[0];   // ["Juan", 25, true]
let nombre = fila[0];      // "Juan"  (posición 0 = string)
let edad = fila[1];        // 25      (posición 1 = number)

📝 Corrección al apunte del profe: dijo que "una tupla no puede modificarse". No es exacto. TypeScript sí permite reasignar un elemento (t[0] = "otro", si respeta el tipo) e incluso t.push(...) (una rareza conocida de TS). Lo que es fijo es su estructura al declararla (cuántos elementos y de qué tipo por posición). Si quieres que sea realmente inmutable, usa readonly:

let p: readonly [string, number] = ["x", 2];
p[0] = "y";   // ❌ ahora sí da error

🔁 5. Recorrer listas con forEach

forEach ejecuta una función por cada elemento de la lista:

personasT.forEach((persona) => {
  let nombre = persona[0];
  let edad = persona[1];
  let esDev = persona[2];
  console.log(`Nombre: ${nombre}, Edad: ${edad}, Es Dev: ${esDev}`);
});

💡 La variable persona toma el valor de cada elemento en cada vuelta. Es más limpio que un for clásico con índice.

🔢 6. Enums (enumerados)

Un enum da nombre a un conjunto de valores relacionados. Por defecto, TS les asigna números empezando en 0 y sumando de 1 en 1:

enum DiaSemana {
  Lunes,      // 0
  Martes,     // 1
  Miercoles,  // 2
  Jueves,     // 3
  Viernes,    // 4
  Sabado,     // 5
  Domingo     // 6
}

let dia: DiaSemana = DiaSemana.Miercoles;
console.log(`Día: ${dia}`);   // → Día: 2   (imprime el NÚMERO, no el nombre)

También puedes darles valores de texto:

enum Estado {
  Activo = "ACTIVO",
  Inactivo = "INACTIVO",
}
console.log(Estado.Activo);   // → ACTIVO

🔄 Reverse mapping (mapa de ida y vuelta)

Un enum numérico funciona en las dos direcciones:

let dia: DiaSemana = DiaSemana.Miercoles;
console.log(dia);              // → 2            (nombre → número)
console.log(DiaSemana[dia]);   // → "Miercoles"  (número → nombre)

Escribes	Obtienes	Dirección
DiaSemana.Miercoles	2	nombre → número
DiaSemana[2]	"Miercoles"	número → nombre

💡 Con el nombre obtienes el número; con el número entre [ ] obtienes el nombre. Es un diccionario de doble sentido.

📝 Ojo: un enum numérico impreso directo da el número (console.log(dia) → 2). Recuerda el orden desde 0: Lunes=0, Martes=1, Miercoles=2 … Domingo=6.

🧪 Entrevista: ¿Para qué un enum? Para reemplazar "números mágicos" o strings sueltos por nombres legibles (DiaSemana.Lunes en vez de 0). Hace el código más claro y seguro.

🧩 Métodos útiles de arrays

let n: number[] = [1, 2, 3];
n.push(4);              // agregar al final → [1,2,3,4]
n.length;               // cantidad → 4
n.map(x => x * 2);      // transformar → [2,4,6,8]
n.filter(x => x > 2);   // filtrar → [3,4]
n.forEach(x => ...);    // recorrer (no devuelve nada)

---

💻 PARTE PRÁCTICA

Código trabajado en clase: 02-Ejercicios/Listas/listas.ts

cd 02-Ejercicios/Listas
tsc && node listas.js

Incluye: arrays básicos, array mixto, interface Persona + Persona[], array de tuplas con push y forEach, y un enum DiaSemana. Todo verificado y corriendo. ✅

---

🏋️ EJERCICIOS CON SOLUCIÓN

Intenta cada uno tapando la solución. Luego compara.

Ejercicio 1 — Filtrar mayores de edad

Dada una lista de edades, imprime solo las que sean ≥ 18.

Ver solución

let edades: number[] = [15, 22, 17, 30, 18];
let mayores: number[] = edades.filter(e => e >= 18);
console.log(mayores);   // [22, 30, 18]

Terminal esperada:

zsh · mayores.ts

$ tsc mayores.ts
$ node mayores.js
[ 22, 30, 18 ]

Ejercicio 2 — Lista de objetos con interface

Crea una interface Producto (nombre: string, precio: number) y una lista con 2 productos. Luego imprime el nombre de cada uno con forEach.

Ver solución

interface Producto {
  nombre: string;
  precio: number;
}

let productos: Producto[] = [
  { nombre: "Teclado", precio: 80 },
  { nombre: "Mouse", precio: 40 },
];

productos.forEach(p => console.log(`Producto: ${p.nombre} - $${p.precio}`));
// Producto: Teclado - $80
// Producto: Mouse - $40

Terminal esperada:

zsh · productos.ts

$ tsc productos.ts
$ node productos.js
Producto: Teclado - $80
Producto: Mouse - $40

Ejercicio 3 — Array de tuplas [ciudad, temperatura]

Guarda 3 mediciones como tuplas [string, number] y muestra cuál tiene la temperatura más alta.

Ver solución

let temps: [string, number][] = [
  ["Lima", 22],
  ["Cusco", 15],
  ["Iquitos", 33],
];

let masCalida = temps[0];
temps.forEach(t => {
  if (t[1] > masCalida[1]) masCalida = t;
});
console.log(`Más cálida: ${masCalida[0]} con ${masCalida[1]}°`); // Iquitos con 33°

Terminal esperada:

zsh · temperaturas.ts

$ tsc temperaturas.ts
$ node temperaturas.js
Más cálida: Iquitos con 33°

Ejercicio 4 — Enum de roles

Crea un enum Rol (Admin, Editor, Lector) y una variable con el rol Editor. Imprime su valor.

Ver solución

enum Rol {
  Admin,    // 0
  Editor,   // 1
  Lector,   // 2
}

let miRol: Rol = Rol.Editor;
console.log(`Rol (número): ${miRol}`);        // 1
console.log(`Rol (nombre): ${Rol[miRol]}`);   // Editor

Terminal esperada:

zsh · rol.ts

$ tsc rol.ts
$ node rol.js
Rol (número): 1
Rol (nombre): Editor

---

❓ Preguntas y respuestas (autoevaluación)

1. ¿Cómo declaras una lista de números?

let x: number[] = [1, 2, 3];

2. ¿Diferencia entre (string | number)[] y string | number[]?

El primero = lista mixta de strings y numbers. El segundo = un string o una lista de numbers (por los paréntesis que faltan).

3. ¿Para qué sirve una interface?

Para definir la forma de un objeto (qué propiedades y tipos tiene). Con Interface[] haces una lista de esos objetos.

4. ¿Un array y una tupla son lo mismo?

No. El array tiene tamaño variable y un mismo tipo. La tupla tiene tamaño fijo y un tipo por posición.

5. ¿Una tupla es inmutable?

No del todo: TS permite reasignar elementos y hasta push. Lo fijo es su estructura al declararla. Para inmutabilidad real, usa readonly.

6. ¿Qué imprime un enum numérico como DiaSemana.Miercoles?

El número (2), no el nombre. Para el nombre: DiaSemana[dia].

7. ¿Qué hace forEach?

Ejecuta una función por cada elemento de la lista. No devuelve nada (a diferencia de map).

📎 Apuntes relacionados

• Conceptos: variables, tipos, arrays, enum
• Comandos: palabras clave de tipos
• Clase 2: any, unknown, void, never

➡️ Siguiente

Funciones — parámetros tipados, opcionales, valor de retorno.