What is a discriminated union? | Interview Question

Q: What is a discriminated union?

**Target Audience:** Developers who model state, events or API results and want the most useful pattern in everyday TypeScript explained from first principles. **Difficulty:** Medium **TypeScript version:** Checked with TypeScript 5.4.5 and `--strict`; the 4.4 and 4.6 improvements are cited from their release notes. > **How to read this doc:** Every idea is explained in plain language first, then tagged with `📌 Interview term:` so you also learn the exact words an interviewer expects. Type claims are checked by `tsc` (an `Equal ` line or a `// @ts-expect-error` line), and the **Verified** section quotes the real output in full. ## 1. Why This Even Matters — A Story First A coffee shop hands you a buzzer. When it lights up, the screen shows one of three words: **READY**, **DELAYED** or **SOLD OUT**. Each word comes with different information: READY tells you the counter number, DELAYED tells you how many minutes, SOLD OUT suggests an alternative. You read the word first, and the

The problem

Question presented to candidate: "What is a discriminated union in TypeScript? Model shapes, or a request that can be loading, successful or failed, and show how the compiler knows which fields are available in each case."

What a strong answer should cover:

A union of object types that all share one property (the discriminant or tag) whose type is a different literal in each member
Checking the tag (switch (s.kind), if (r.ok)) narrows the whole object, so member-specific fields become available
Why it is better than one object with many optional fields: impossible states cannot be written, and excess-property checks reject mixed objects
The tag must be a literal type (string, number, boolean literal, undefined); a plain string tag narrows nothing
Narrowing also works through destructured tags and checks stored in a const (4.4 / 4.6), and the pattern enables exhaustiveness checking
Typical uses: reducer actions, Result types, API response states, AST nodes

Code / implementation expected: Yes — define a small discriminated union and a function that switches on the tag.

discriminated-union

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who model state, events or API results and want the most useful pattern in everyday TypeScript explained from first principles. Difficulty: Medium TypeScript version: Checked with TypeScript 5.4.5 and --strict; the 4.4 and 4.6 improvements are cited from their release notes.

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer expects. Type claims are checked by tsc (an Equal line or a // @ts-expect-error line), and the Verified section quotes the real output in full.

1. Why This Even Matters — A Story First

A coffee shop hands you a buzzer. When it lights up, the screen shows one of three words: READY, DELAYED or SOLD OUT. Each word comes with different information: READY tells you the counter number, DELAYED

The solution is hidden so you can try first

9 min read · 11 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

TypeScriptShapes and a Result type: narrowing by a literal tag

Practice

TypeScriptReducer actions, destructured tags and literal-only discriminants

Practice

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.