Union Types and Narrowing

Some values genuinely have more than one possible type. An id might arrive as a number from a database and a string from a URL. A union says so, with |:

type Id = string | number;

A union permits only what all members permit

This is the rule that explains every union error you will hit:

function printId(id: string | number) {
  console.log(id.toUpperCase()); // rejected
}

toUpperCase exists on string but not on number, so TypeScript refuses. It cannot know which one arrived, and it will not let you gamble. The error is not the compiler being awkward — it is pointing at a real crash that would happen whenever a number is passed.

Narrowing

You fix it by proving which member you have. TypeScript follows ordinary JavaScript checks and updates the type inside each branch — this is control flow analysis:

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // here, id is string
  } else {
    console.log(id.toFixed(0));    // here, id is number
  }
}

Nothing special was added. A plain typeof check is enough, because the compiler models what your code has already established. Inside the if, id is a string; in the else, the only remaining possibility is number, so that is what it becomes.

Several everyday checks narrow:

• typeof x === "string" for primitives
• x === "published" for literal unions
• Array.isArray(x) for arrays
• a truthiness check like if (x) for removing null/undefined

Unions of literals

Unions are not limited to primitive types. A union of literal types is one of TypeScript's most useful patterns:

type Status = "draft" | "review" | "published";

Now "pubished" (typo) is a compile error rather than a value that silently fails a comparison forever. Lesson 10 goes further with this idea.

Exhaustiveness

When you narrow a literal union across branches and handle every member, the final else receives a value of type never — the type with no possible values. That is TypeScript telling you "nothing can reach here", and it is how you get a compile error later if someone adds a fourth status and forgets a branch.