Genéricos e uniões

Tipos união

Um tipo união indica que um valor pode ser de um entre vários tipos, usando |.

let id: number | string;
id = 42;     // válido
id = "abc";  // também válido
// id = true; // ❌ Erro

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

Para trabalhar com uniões de forma segura, usam-se verificações de tipo:

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

Genéricos (introdução)

Os genéricos permitem escrever código que funciona com qualquer tipo sem perder a informação de tipo. São escritos com <T>.

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

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

Assim, primeiro preserva o tipo dos elementos do array que recebe, em vez de retornar any.

Exemplos

A lógica genérica funciona igual em JS

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