Lección 80 — Rest Parameters y Function Overloads

🧠 Concepto

TypeScript extiende dos características de JavaScript con tipado avanzado: rest parameters y function overloads.

Rest parameters

Los rest parameters permiten pasar un número variable de argumentos como un array:

function sumar(...numeros: number[]): number {
  return numeros.reduce((acc, n) => acc + n, 0);
}

console.log(sumar(1, 2, 3));       // → 6
console.log(sumar(10, 20, 30, 40)); // → 100

El tipo ...numeros: number[] indica que todos los argumentos adicionales se agrupan en un array de números.

Function overloads

Las sobrecargas de función permiten declarar múltiples firmas para una misma función. Esto es útil cuando una función acepta distintos tipos de argumentos y queremos tipar cada combinación correctamente.

La sintaxis consiste en:

1. Firmas de sobrecarga: declaran los tipos de entrada/salida sin implementación.
2. Firma de implementación: contiene la lógica real y debe ser compatible con todas las firmas anteriores.

// Firmas de sobrecarga
function transformar(valor: string): string;
function transformar(valor: number): number;

// Firma de implementación
function transformar(valor: string | number): string | number {
  if (typeof valor === 'string') {
    return valor.toUpperCase();
  }
  return valor * 2;
}

💻 Ejemplo

Rest parameters

function unir(separador: string, ...partes: string[]): string {
  return partes.join(separador);
}

console.log(unir('-', 'a', 'b', 'c')); // → 'a-b-c'

function promediar(...valores: number[]): number {
  if (valores.length === 0) return 0;
  return valores.reduce((a, b) => a + b) / valores.length;
}

Function overloads

// Sobrecargas para una función que obtiene datos
function obtener(id: number): { id: number; nombre: string };
function obtener(nombre: string): { id: number; nombre: string }[];
function obtener(activo: boolean): { id: number; nombre: string; activo: boolean }[];

// Implementación
function obtener(param: number | string | boolean): any {
  if (typeof param === 'number') {
    return { id: param, nombre: 'Usuario ' + param };
  }
  if (typeof param === 'string') {
    return [{ id: 1, nombre: param }];
  }
  return [{ id: 1, nombre: 'Ejemplo', activo: param }];
}

// Uso — TS sabe qué tipo retorna cada variante
const usuario = obtener(42);       // tipo: { id: number; nombre: string }
const usuarios = obtener('Ana');   // tipo: { id: number; nombre: string }[]
const activos = obtener(true);     // tipo: { id: number; nombre: string; activo: boolean }[]

📝 Ejercicio

Crea una función crearElemento con sobrecargas que acepte:

• Solo un tag: string → devuelve un elemento HTML con ese tag.
• Un tag: string y contenido: string → devuelve el elemento con contenido.
• Un tag: string, contenido: string, y clase: string → devuelve el elemento con contenido y clase CSS.

Define las tres firmas y la implementación correspondiente.

⚠️ Nota

En el rest parameter, solo puede haber uno y debe ser el último parámetro. En las sobrecargas, el orden de las firmas importa: pon primero las más específicas y luego las más generales.

🎯 Tip

Las sobrecargas mejoran la experiencia de desarrollo (autocompletado y tipos precisos). No abuses de ellas; si las firmas son muy diferentes, considera separar la función en varias funciones especializadas.