Discriminated unions in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a simple discriminated union function

What is the output of the following TypeScript code?

Typescript

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

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

console.log(area({ kind: "circle", radius: 3 }));

A TypeError at runtime

B 9

C 28.274333882308138

D undefined

💡 Hint

Recall the formula for the area of a circle is π × radius².

The function calculates the area based on the shape kind. For a circle with radius 3, area = π × 3² = 28.2743 approximately.

🧠 Conceptual

intermediate

Discriminated union type narrowing

Given the discriminated union below, which statement correctly narrows the type inside the if block?

Typescript

type Pet =
  | { type: "dog"; barkVolume: number }
  | { type: "cat"; livesLeft: number };

function speak(pet: Pet) {
  if (/* which condition? */) {
    console.log(pet.barkVolume);
  }
}

A pet.type === "dog"

B pet.livesLeft > 0

C pet.type === "cat"

D pet.barkVolume !== undefined

💡 Hint

Discriminated unions use a common literal property to narrow types.

Checking pet.type === "dog" narrows the type to the dog variant, so pet.barkVolume is accessible safely.

🔧 Debug

advanced

Identify the error in discriminated union switch

What error will this TypeScript code produce?

Typescript

type Vehicle =
  | { kind: "car"; wheels: 4 }
  | { kind: "bike"; wheels: 2 };

function describe(vehicle: Vehicle) {
  switch (vehicle.kind) {
    case "car":
      return `Car with ${vehicle.wheels} wheels`;
    case "bike":
      return `Bike with ${vehicle.wheels} wheels`;
    case "truck":
      return "Truck";
  }
}

A Error: Object is possibly 'undefined' in switch default

B Error: Missing return statement in function

C No error, code compiles fine

D Error: Type '"truck"' is not assignable to type '"car" | "bike"'

💡 Hint

Check the switch cases against the union type's possible 'kind' values.

The 'truck' case is invalid because 'truck' is not part of the Vehicle union's 'kind' property. TypeScript flags this as an error.

📝 Syntax

advanced

Correct syntax for discriminated union with literal types

Which option correctly defines a discriminated union type for a shape with 'kind' as the discriminator?

A type Shape = { kind: string, radius: number } | { kind: string, size: number };

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

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

D type Shape = { kind: "circle" & "square", radius: number, size: number };

💡 Hint

Discriminated unions require a common property with distinct literal values.

Option B uses distinct literal types for 'kind' which allows TypeScript to discriminate between variants.

🚀 Application

expert

Determine the output of a complex discriminated union function

What is the output of this TypeScript code?

Typescript

type Event =
  | { type: "click"; x: number; y: number }
  | { type: "keypress"; key: string };

function handleEvent(e: Event): string {
  switch (e.type) {
    case "click":
      return `Clicked at (${e.x},${e.y})`;
    case "keypress":
      return `Key pressed: ${e.key}`;
  }
}

console.log(handleEvent({ type: "keypress", key: "Enter" }));

A Key pressed: Enter

B Clicked at (undefined,undefined)

C TypeError at runtime

D undefined

💡 Hint

Check which case matches the event type and what properties are accessed.

The event type is 'keypress', so the function returns 'Key pressed: Enter'.