Discriminated union narrowing in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a discriminated union in TypeScript?

A discriminated union is a special kind of union type that uses a common literal property (called the discriminant) to tell which type in the union is being used. This helps TypeScript narrow down the type safely.

beginner

How does TypeScript use the discriminant property to narrow types?

TypeScript checks the value of the discriminant property in a conditional statement. Based on its value, it knows exactly which type from the union is active and narrows the type accordingly.

beginner

Example: Given a union type with a 'kind' property, how do you narrow it?

Use a switch or if statement on the 'kind' property. For example:

switch (shape.kind) {
  case 'circle':
    // shape is Circle here
    break;
  case 'square':
    // shape is Square here
    break;
}

intermediate

Why is discriminated union narrowing safer than using type assertions?

Because TypeScript automatically checks the discriminant property and narrows the type, it prevents mistakes that can happen if you manually tell TypeScript a type without checking. This reduces bugs.

intermediate

What happens if you forget to handle one case in a discriminated union switch?

TypeScript can warn you if you enable strict checks. Missing a case means your code might not handle all possible types, which can cause runtime errors.

What property is essential for discriminated union narrowing in TypeScript?

A A numeric index signature

B A common literal property shared by all union members

C A method with the same name in all types

D An optional property

Discriminated unions rely on a common literal property (discriminant) to distinguish types.

How does TypeScript narrow a discriminated union inside a switch statement?

A By checking the value of the discriminant property in each case

B By guessing the type based on variable name

C By using runtime type information

D By ignoring the discriminant property

TypeScript uses the discriminant property's value in each case to narrow the type.

Which of these is a benefit of discriminated union narrowing?

A Automatic type safety without manual assertions

B Faster runtime performance

C Allows any property to be accessed without checks

D Removes the need for type annotations

Discriminated unions provide automatic type safety by narrowing types based on a property.

What keyword is commonly used to check the discriminant property in TypeScript?

A try

B for

C while

D switch

The switch statement is commonly used to check the discriminant property for narrowing.

If a discriminated union has a 'type' property with values 'A' or 'B', what happens if you check 'type === "A"'?

A TypeScript ignores the check

B TypeScript throws an error

C TypeScript narrows the variable to the type with 'type' equal to 'A'

D TypeScript narrows to both types

Checking the discriminant property value narrows the variable to the matching type.

Explain how discriminated union narrowing works in TypeScript and why it is useful.

Think about how a shared property helps TypeScript know the exact type.

Describe a simple example of a discriminated union and how you would use a switch statement to narrow its type.

Use shapes like circle and square with a 'kind' property.

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