Discriminated union narrowing in Typescript - Step-by-Step Execution

Concept Flow - Discriminated union narrowing

Start with union type variable

↓

Check discriminant property

↓

Match case A

↓

Use properties

↓

End

We check a special property (discriminant) to know which type we have, then safely use its specific properties.

Execution Sample

Typescript

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

function area(shape: Shape) {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.size ** 2;
  }
}

Calculates area by checking the 'kind' property to know if shape is circle or square.

Execution Table

Step	Condition	Condition Result	Narrowed Type	Action	Output
1	shape.kind === "circle"	true	{ kind: "circle"; radius: number }	Calculate circle area	28.274333882308138
2	shape.kind === "circle"	false	{ kind: "square"; size: number }	Calculate square area	16
3	No more cases	-	-	Return result	-

💡 All union cases handled by checking discriminant 'kind'; function returns area.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
shape	{ kind: "circle", radius: 3 }	{ kind: "circle", radius: 3 }	-	-
shape	{ kind: "square", size: 4 }	-	{ kind: "square", size: 4 }	-
output	-	28.274333882308138	16	-

Key Moments - 2 Insights

Why can we access 'radius' only after checking shape.kind === "circle"?

Because the discriminated union narrows the type to the circle variant, so TypeScript knows 'radius' exists only then (see execution_table step 1).

What happens if we forget to check the discriminant property?

TypeScript won't know which type it is, so accessing specific properties like 'radius' or 'size' will cause errors or require unsafe casts.

Visual Quiz - 3 Questions

Look at the execution table, what is the narrowed type when shape.kind === "circle" is true?

A { kind: "square"; size: number }

B { kind: "circle"; radius: number }

C union of both types

D any

💡 Hint

Check the 'Narrowed Type' column in execution_table row 1.

At which step does the condition shape.kind === "circle" become false?

A Step 1

B Step 3

C Step 2

D Never

💡 Hint

Look at the 'Condition Result' column in execution_table row 2.

If we add a new shape kind 'triangle', what must we do to keep narrowing working?

A Add a new condition checking shape.kind === "triangle"

B Remove existing conditions

C Use type assertions everywhere

D Ignore it, TypeScript handles automatically

💡 Hint

Discriminated union narrowing requires checking each discriminant value explicitly (see concept_flow).

Concept Snapshot

Discriminated union narrowing:
- Use a common 'discriminant' property (like 'kind')
- Check this property in conditions
- TypeScript narrows type inside each branch
- Access only properties valid for that narrowed type
- Ensures safe, clear code for union types

Full Transcript

Discriminated union narrowing means using a special property common to all types in a union to tell which exact type we have. In the example, the 'kind' property tells if the shape is a circle or square. We check 'shape.kind === "circle"' to narrow the type to circle, so we can safely use 'radius'. If false, we know it's a square and use 'size'. This way, TypeScript helps us avoid mistakes by knowing exactly which properties exist at each step.

Practice

1.

What is the main purpose of a discriminated union in TypeScript?

easy

A. To force all types in a union to have the same properties

B. To create a union of unrelated types without any common property

C. To prevent any type narrowing in TypeScript

D. To use a common property to distinguish between different types in a union

Solution

1. Step 1: Understand discriminated union concept

   A discriminated union uses a shared property (called discriminant) to identify which type is currently in use.

2. Step 2: Identify the purpose of the discriminant property

   This shared property helps TypeScript narrow the type safely and access type-specific properties.

3. Final Answer:

   To use a common property to distinguish between different types in a union -> Option D

4. Quick Check:

   Discriminated union = common property for type narrowing [OK]

Hint: Look for a shared property that identifies the type [OK]

Common Mistakes:

• Thinking discriminated unions require identical properties
• Believing unions can't be narrowed by properties
• Confusing discriminated unions with type intersections

2.

Which of the following is the correct syntax to define a discriminated union type in TypeScript?

type Shape = ?

easy

A. type Shape = { radius: number } & { side: number }

B. type Shape = { circle: number } | { square: number }

C. type Shape = { kind: 'circle'; radius: number } | { kind: 'square'; side: number }

D. type Shape = { kind: number; radius: number } | { kind: number; side: number }

Solution

1. Step 1: Check for a shared discriminant property

   type Shape = { kind: 'circle'; radius: number } | { kind: 'square'; side: number } uses 'kind' as a string literal property to distinguish types, which is correct.

2. Step 2: Verify property types and union structure

   type Shape = { kind: 'circle'; radius: number } | { kind: 'square'; side: number } correctly defines two object types with 'kind' discriminant and specific properties.

3. Final Answer:

   type Shape = { kind: 'circle'; radius: number } | { kind: 'square'; side: number } -> Option C

4. Quick Check:

   Discriminated union needs a shared literal property [OK]

Hint: Use a string literal property as discriminant [OK]

Common Mistakes:

• Using & instead of | for union
• Not using a literal type for discriminant
• Using number instead of string literal for discriminant

3.

What will be the output of the following TypeScript code?

type Animal =
  | { type: 'dog'; barkVolume: number }
  | { type: 'cat'; livesLeft: number };

function describe(animal: Animal) {
  if (animal.type === 'dog') {
    return `Dog barks at volume ${animal.barkVolume}`;
  } else {
    return `Cat has ${animal.livesLeft} lives left`;
  }
}

console.log(describe({ type: 'cat', livesLeft: 7 }));

medium

A. "Cat has 7 lives left"

B. "Dog barks at volume 7"

C. Type error at compile time

D. Runtime error accessing property

Solution

1. Step 1: Analyze the input object and type check

   The input has type 'cat' and livesLeft 7, matching the second union member.

2. Step 2: Follow the if condition and return value

   Since animal.type is 'cat', the else branch runs, returning "Cat has 7 lives left".

3. Final Answer:

   "Cat has 7 lives left" -> Option A

4. Quick Check:

   Discriminant 'type' guides correct property access [OK]

Hint: Check the discriminant property value to pick branch [OK]

Common Mistakes:

• Assuming wrong branch runs
• Expecting compile or runtime errors
• Confusing property names between types

4.

Identify the error in this TypeScript code using discriminated unions:

type Vehicle =
  | { kind: 'car'; wheels: number }
  | { kind: 'bike'; pedals: number };

function getWheels(vehicle: Vehicle) {
  if (vehicle.kind === 'car') {
    return vehicle.wheels;
  } else {
    return vehicle.wheels;
  }
}

medium

A. Missing return type annotation on function

B. Accessing 'wheels' on bike type causes error

C. Incorrect discriminant property name

D. No error, code is correct

Solution

1. Step 1: Check property access in each branch

   In the else branch, vehicle.kind is 'bike', but code accesses vehicle.wheels which does not exist on bike.

2. Step 2: Understand TypeScript error

   This causes a compile-time error because 'wheels' is not a property of the bike type.

3. Final Answer:

   Accessing 'wheels' on bike type causes error -> Option B

4. Quick Check:

   Access only properties valid for narrowed type [OK]

Hint: Check property exists on all union members before access [OK]

Common Mistakes:

• Assuming all properties exist on all types
• Ignoring discriminant for narrowing
• Thinking missing return type causes error

5.

Given the following discriminated union, how can you safely add a new shape type { kind: 'triangle'; base: number; height: number } and update the area function to handle it?

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

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

hard

A. Add triangle to Shape union and add a case 'triangle' in switch returning 0.5 * base * height

B. Add triangle to Shape union but do not change area function

C. Add triangle to Shape union and add a default case returning -1

D. Add triangle to Shape union and remove switch statement

Solution

1. Step 1: Extend the discriminated union type

   Add { kind: 'triangle'; base: number; height: number } to the Shape union to include the new shape.

2. Step 2: Update the area function switch

   Add a new case 'triangle' that calculates area as 0.5 * base * height to handle the new shape safely.

3. Final Answer:

   Add triangle to Shape union and add a case 'triangle' in switch returning 0.5 * base * height -> Option A

4. Quick Check:

   Update union and switch for new discriminant case [OK]

Hint: Add new type and matching switch case for safe narrowing [OK]

Common Mistakes:

• Forgetting to update the function for new type
• Using default case instead of explicit case
• Removing switch and losing type safety