Exhaustive pattern matching in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of exhaustive match with union types

What is the output of this TypeScript code using exhaustive pattern matching with match?

Typescript

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

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

console.log(area({ kind: 'circle', radius: 3 }).toFixed(2));

A "28.27"

B "9"

C TypeScript compile error due to missing case

D "18.85"

💡 Hint

Think about the formula for the area of a circle and how the code calculates it.

The code matches the shape kind 'circle' and calculates area as π * radius². For radius 3, area = π * 9 ≈ 28.27.

❓ Predict Output

intermediate

Result of exhaustive match with never type

What will this TypeScript code output when run?

Typescript

type Status = 'success' | 'error';

function handleStatus(status: Status) {
  return match (status) {
    case 'success':
      return 'Yay!';
    case 'error':
      return 'Oops!';
  }
}

console.log(handleStatus('error'));

A "Yay!"

B TypeScript compile error: Non-exhaustive match

C Runtime error: Unhandled case

D "Oops!"

💡 Hint

Check which case matches the input 'error'.

The input 'error' matches the second case, so the function returns 'Oops!'.

🔧 Debug

advanced

Identify the error in exhaustive match

What error does this TypeScript code produce?

Typescript

type Command = { type: 'start' } | { type: 'stop' } | { type: 'pause' };

function execute(cmd: Command) {
  return match (cmd.type) {
    case 'start':
      return 'Started';
    case 'stop':
      return 'Stopped';
  }
}

execute({ type: 'pause' });

A Returns undefined for 'pause' case

B TypeScript compile error: Non-exhaustive match, missing 'pause' case

C Runtime error: Unhandled case 'pause'

D No error, returns 'Stopped'

💡 Hint

Check if all union cases are handled in the match.

The match does not handle the 'pause' case, so TypeScript reports a compile error for non-exhaustive matching.

📝 Syntax

advanced

Which option causes a syntax error in exhaustive match?

Which of the following TypeScript code snippets causes a syntax error due to incorrect exhaustive pattern matching syntax?

A return match (value) { case 'a': 1 case 'b': 2 }

B return match (value) { case 'a': return 1; case 'b': return 2; }

C return match (value) { case 'a': 1; case 'b': 2; default: 0; }

D return match (value) { case 'a': 1; case 'b': 2; }

💡 Hint

Look for missing punctuation or keywords in the match cases.

Option A is missing a semicolon or return keyword between cases, causing a syntax error.

🚀 Application

expert

Number of cases needed for exhaustive match

Given this TypeScript union type, how many cases must a match statement cover to be exhaustive?

Typescript

type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keydown'; key: string }
  | { type: 'resize'; width: number; height: number }
  | { type: 'scroll'; scrollTop: number };

// How many cases are needed in match(event.type) to be exhaustive?

A 3

B 5

C 4

D Depends on runtime values

💡 Hint

Count the distinct union members by their 'type' property.

There are 4 distinct 'type' values in the union, so 4 cases are needed for exhaustive matching.