Discriminated union narrowing in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check the shape type using discriminated union.

Typescript

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

function area(shape: Shape) {
  if (shape.kind === [1]) {
    return Math.PI * shape.radius ** 2;
  }
  return shape.size * shape.size;
}

Drag options to blanks, or click blank then click option'

A'rectangle'

B'circle'

C'square'

D'triangle'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'square' instead of 'circle' in the if condition.

Checking for a kind value not defined in the union.

The discriminated union uses the 'kind' property to distinguish types. Here, checking for 'circle' allows access to 'radius'.

2fill in blank

medium

Complete the code to narrow the union using a switch statement.

Typescript

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

function perimeter(shape: Shape) {
  switch (shape.kind) {
    case [1]:
      return 2 * Math.PI * shape.radius;
    case 'square':
      return 4 * shape.size;
  }
}

Drag options to blanks, or click blank then click option'

A'circle'

B'square'

C'triangle'

D'oval'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'square' in the case for radius calculation.

Using an undefined kind value.

The switch case must match the 'kind' value 'circle' to access radius for perimeter calculation.

3fill in blank

hard

Fix the error in the type narrowing to access the correct property.

Typescript

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

function describe(shape: Shape) {
  if (shape.kind === 'square') {
    return `Square with size ${shape.[1]`;
  } else {
    return `Circle with radius ${shape.radius}`;
  }
}

Drag options to blanks, or click blank then click option'

Aradius

Bwidth

Clength

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Accessing 'radius' on a square shape.

Using properties not defined in the type.

When shape.kind is 'square', the property to access is 'size', not 'radius'.

4fill in blank

hard

Fill both blanks to correctly narrow the union and access properties.

Typescript

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

function getInfo(shape: Shape) {
  if (shape.[1] === [2]) {
    return shape.radius;
  }
  return shape.size;
}

Drag options to blanks, or click blank then click option'

Akind

B'circle'

C'square'

Dradius

Attempts:

3 left

💡 Hint

Common Mistakes

Checking the wrong property name.

Comparing to the wrong kind value.

To narrow the union, check if shape.kind equals 'circle' to access radius; otherwise, access size.

5fill in blank

hard

Fill all three blanks to create a function that returns the area using discriminated union narrowing.

Typescript

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

function calculateArea(shape: Shape) {
  return {
    [1]: (shape.kind === [3] ? shape.[2] : shape.size),
    area: shape.kind === [3] ? Math.PI * shape.radius ** 2 : shape.size ** 2
  };
}

Drag options to blanks, or click blank then click option'

Adimension

Bradius

C'circle'

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names for keys or values.

Incorrectly checking the kind value.

The returned object uses 'dimension' as key, accesses 'radius' property, and checks if kind is 'circle' to calculate area.

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