Summary - Discriminated unions
- TypeScript course
- Advanced
- Lesson 32/57
- 4 min
Write an event handler with discriminated unions.
Summary - Discriminated unions
Discriminated unions are ideal for modeling different events in a data flow under a single type. Each event is distinguished by its own discriminant value; a switch statement provides safe branching. When a new event is added, all cases must be updated, so the compiler catches gaps.
type Action =
| { type: "add"; item: string }
| { type: "remove"; id: number }
| { type: "clear" };
function apply(a: Action): string {
switch (a.type) {
case "add": return `added ${a.item}`;
case "remove": return `removed ${a.id}`;
case "clear": return "cleared";
}
}Practice Write an event handler
Define the Action discriminated union type: "add" (item: string), "remove" (id: number), "clear" members, with a type discriminant field. Write an apply(a: Action): string function using switch (a.type). For add return `added ${a.item}`, for remove return `removed ${a.id}`, for clear return "cleared". Print results via console.log(apply({ type: "add", item: "apple" })), console.log(apply({ type: "remove", id: 7 })), and console.log(apply({ type: "clear" })).
Starter code
// Action discriminated union türünü tanımla (type discriminant, add, remove, clear üyeleri)
// apply fonksiyonunu discriminant kontrolüyle switch ile yaz
// add, remove ve clear olaylarının sonuçlarını yazdırSample solution
type Action =
| { type: "add"; item: string }
| { type: "remove"; id: number }
| { type: "clear" };
function apply(a: Action): string {
switch (a.type) {
case "add":
return `added ${a.item}`;
case "remove":
return `removed ${a.id}`;
case "clear":
return "cleared";
}
}
console.log(apply({ type: "add", item: "apple" }));
console.log(apply({ type: "remove", id: 7 }));
console.log(apply({ type: "clear" }));Expected output
added apple removed 7 cleared
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What happens when a new member is added to a discriminated union?
- A runtime error is thrown
- If switch cases are missing, the compiler warns Correct answer
- The union becomes an array
- Existing cases are updated automatically
Explanation: When a new member is added, the switch cases no longer cover all members; TypeScript warns about the missing case at compile time and provides safety.
2 Handle the clear event
type Action =
| { type: "add"; item: string }
| { type: "remove"; id: number }
| { type: "clear" };
function apply(a: Action): string {
switch (a.type) {
case "add": return `added ${a.item}`;
case "remove": return `removed ${a.id}`;
case ____: return "cleared";
}
}type Action =
| { type: "add"; item: string }
| { type: "remove"; id: number }
| { type: "clear" };
function apply(a: Action): string {
switch (a.type) {
case "add": return `added ${a.item}`;
case "remove": return `removed ${a.id}`;
case "clear": return "cleared";
}
}Explanation: The case "clear" narrows the Action union to the clear member; since this member has no extra fields, only a constant string is returned.
3 Discriminated unions summary matching
| Term | Meaning |
|---|---|
Discriminated union |
tagged member union |
Discriminant alan |
different literal value in each member |
switch ifadesi |
branch per member |
Yeni üye ekleme |
compiler catches missing case |