Uniones y estrechamiento

Una unión describe un valor que puede ser de varios tipos:

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}

El compilador solo permite lo que es válido para todas las ramas de la unión. Por eso esto falla: id.toUpperCase() no existe en number.

Estrechar

Estrechar (narrowing) es demostrarle al compilador en qué rama estás. La forma más común es typeof:

function printId(id: number | string) {
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // aquí id es string
  } else {
    console.log(id);               // aquí id es number
  }
}

Dentro del if, id es string. En el else, number. No hiciste ninguna conversión: solo le diste al compilador una prueba que puede seguir.

Miembros comunes

Si la operación existe en todas las ramas, no hace falta estrechar:

function getFirstThree(x: number[] | string) {
  return x.slice(0, 3); // slice existe en ambos
}

Uniones de literales

Combinar literales con | da conjuntos cerrados: "left" | "right" | "center". Son la forma más barata de evitar valores inválidos, y el editor los autocompleta.