Unions and literal types

Last reviewed Jun 1, 2026 Content v20260601

Track mode

client_typescript

Means

In-browser TS

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Unions and literal types—the ideas, syntax, and habits you need before moving on in TypeScript.

Narrowing and unions model real-world data shapes and eliminate whole classes of runtime bugs.

You will apply Unions and literal types in contexts like: Modern front-end apps, Node APIs, and any team that standardizes on TS-first tooling.

Write TypeScript, compile in the browser, run the emitted JavaScript, and check understanding with MCQs.

When the previous lesson's MCQs feel easy and you can explain Unions and literal types in your own words.

A union string | number means “either.” Literal types narrow to exact values: 'GET' | 'POST'.

Combine them for domain states: type Status = 'idle' | 'loading' | 'error'.

Narrowing unions

After checking a discriminant or using typeof, TypeScript shrinks the union so only valid members remain—this is how APIs model finite state machines without enums.

Challenge

Status union

Type status as 'draft' | 'published' | 'archived'.
Print the status and whether it equals published.

Done when: output includes status and a boolean.

Interview prep

What is a discriminated union?: A union of object types sharing a literal field (e.g. kind) so switch can narrow safely.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

What part of this lesson needs a second read?
What would you try differently in a real project?

No discussion yet. Be the first to ask a question.