Genéricos y uniones

Tipos unión

Un tipo unión indica que un valor puede ser de uno entre varios tipos, usando |.

let id: number | string;
id = 42;     // válido
id = "abc";  // también válido
// id = true; // ❌ Error

function formatear(valor: number | string): string {
  return `Valor: ${valor}`;
}

Para trabajar con uniones de forma segura se usan comprobaciones de tipo:

function describir(x: number | string): string {
  if (typeof x === "number") return `número ${x.toFixed(2)}`;
  return `texto de ${x.length} caracteres`;
}

Genéricos (introducción)

Los genéricos permiten escribir código que funciona con cualquier tipo sin perder la información de tipo. Se escriben con <T>.

function primero<T>(arr: T[]): T {
  return arr[0];
}

const n = primero([1, 2, 3]);       // T = number, n es number
const s = primero(["a", "b"]);      // T = string, s es string

Así, primero conserva el tipo de los elementos del array que recibe, en lugar de devolver any.

Ejemplos

La lógica genérica funciona igual en JS

function primero(arr) {
  return arr[0];
}
function describir(x) {
  if (typeof x === "number") return "número " + x.toFixed(2);
  return "texto de " + x.length + " caracteres";
}
console.log(primero([10, 20, 30]));
console.log(describir(3.14159));
console.log(describir("hola"));