Discriminated unions in Typescript - Step-by-Step Execution

Concept Flow - Discriminated unions

Define union types with a common 'kind' property

↓

Create a variable of the union type

↓

Use switch or if on 'kind'

↓

Handle case A

↓

Use specific properties safely

Discriminated unions use a shared 'kind' property to safely distinguish and handle different types in a union.

Execution Sample

Typescript

type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'square'; size: number };

function area(shape: Shape) {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.size ** 2;
  }
}

Calculates area based on the shape's kind, safely accessing properties.

Execution Table

Step	Action	shape.kind	Condition	Branch Taken	Result
1	Call area with {kind: 'circle', radius: 3}	circle	switch on 'circle'	case 'circle'	Calculate area = π * 3^2 = 28.2743
2	Return area for circle	circle	-	-	28.2743
3	Call area with {kind: 'square', size: 4}	square	switch on 'square'	case 'square'	Calculate area = 4^2 = 16
4	Return area for square	square	-	-	16
5	Call area with unknown kind	triangle	switch on 'triangle'	no matching case	No result (exhaustive check error if enabled)
6	Exit	-	-	-	Function ends

💡 Function ends after handling all known 'kind' cases or error if unknown.

Variable Tracker

Variable	Start	After Call 1	After Call 2	After Call 3	Final
shape.kind	-	circle	circle	square	-
Result	-	28.2743	28.2743	16	-

Key Moments - 3 Insights

Why do we check 'shape.kind' instead of other properties?

Because 'kind' is the shared discriminant property that tells us exactly which shape type we have, so we know which properties exist safely (see execution_table rows 1 and 3).

What happens if 'shape.kind' has a value not handled in the switch?

The function does not return a value for unknown kinds, which can cause errors or require an exhaustive check (see execution_table row 5).

Why is it safe to access 'shape.radius' only in the 'circle' case?

Because the switch on 'kind' guarantees the shape is a circle there, so 'radius' exists (see execution_table row 1).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of 'shape.kind'?

A triangle

B circle

C square

D undefined

💡 Hint

Check the 'shape.kind' column at step 3 in execution_table.

At which step does the function handle a shape with kind 'circle'?

A Step 1

B Step 3

C Step 5

D Step 6

💡 Hint

Look for 'case 'circle'' in the 'Branch Taken' column in execution_table.

If we add a new shape kind 'rectangle', what will happen in the current switch?

A It will be handled automatically.

B It will cause a compile-time error if exhaustive checks are enabled.

C It will return area as zero.

D It will call the 'circle' case.

💡 Hint

See execution_table row 5 about unknown kinds and exhaustive checks.

Concept Snapshot

Discriminated unions use a common 'kind' property to distinguish types.
Use switch or if on 'kind' to safely access type-specific properties.
This ensures type safety and clear code.
Always handle all 'kind' cases to avoid errors.
Example:
  type Shape = {kind:'circle', radius:number} | {kind:'square', size:number};

Full Transcript

Discriminated unions in TypeScript let us combine different types that share a common property called 'kind'. This property tells us which type we have. When we write a function that takes this union type, we check the 'kind' property using a switch or if statement. This way, we know exactly which properties exist and can use them safely. For example, if 'kind' is 'circle', we can use 'radius'. If 'kind' is 'square', we use 'size'. If we get a 'kind' value that we don't expect, the function might not work correctly unless we handle that case. This pattern helps us write clear and safe code when working with different but related types.