Lesson 18 — Discriminated unions

Unions with a tag

A discriminated union gives every shape a shared field with a fixed text value — a tag, such as kind: "circle" or kind: "square". Checking the tag (often with switch) tells TypeScript exactly which shape you have, so it lets you use that shape's own fields.

type Msg = { kind: "text"; body: string } | { kind: "image"; url: string };
function show(m: Msg) {
  return m.kind === "text" ? m.body : m.url;
}

Why it matters: this is the standard way to model events, API results and app state that can be in several forms.