Discriminated union narrowing in Typescript - Time & Space Complexity

Time Complexity: Discriminated union narrowing

O(n)

Understanding Time Complexity

We want to understand how the time it takes to check types in a discriminated union grows as the number of cases increases.

How does the program's work change when we add more options to the union?

Scenario Under Consideration

Analyze the time complexity of the following code snippet.

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

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

This code calculates the area of a shape by checking its kind and then using the right formula.

Identify Repeating Operations

Identify the loops, recursion, array traversals that repeat.

• Primary operation: The switch statement checks the shape's kind against each case.
• How many times: It compares once per call, but the number of cases grows with the union size.

How Execution Grows With Input

As we add more shape types, the switch must check more cases before finding a match.

Input Size (number of cases)	Approx. Operations (checks)
3	Up to 3 checks
10	Up to 10 checks
100	Up to 100 checks

Pattern observation: The number of checks grows linearly with the number of cases.

Final Time Complexity

Time Complexity: O(n)

This means the time to find the right case grows in direct proportion to how many cases there are.

Common Mistake

[X] Wrong: "Checking a discriminated union is always constant time because it just looks at one property."

[OK] Correct: While the property access is constant, the switch or if-else must compare against each case, so more cases mean more checks.

Interview Connect

Understanding how type checks scale helps you explain your code's efficiency clearly and shows you think about how programs behave as they grow.

Self-Check

"What if we replaced the switch with a map from kind to function? How would the time complexity change?"

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