Union types and narrowing

📘What it really is

• A union type allows one of several types, written with |:

let id: string | number;
type Status = "pending" | "paid" | "cancelled";
let orderStatus: Status = "paid";

The second form, a union of exact text values (literal types), is extremely useful: misspelling "payed" is now an error.

• Before using a union value in a way that only suits one type, narrow it with a check:

function formatId(id: string | number): string {
  if (typeof id === "number") {
    return `#${id.toString().padStart(4, "0")}`;
  }
  return id.toUpperCase();
}

Inside the if, TypeScript knows id is a number; after it, a string.

• Missing values: with strict on, null and undefined must be part of the type to be allowed: let note: string | undefined;. TypeScript then makes you handle the missing case, preventing the "Cannot read properties of undefined" error at its source.

• find returns Product | undefined, so TypeScript insists you check before using the result. That's a real bug caught before it happens.