Exhaustive pattern matching in Typescript - Mini Project: Build & Apply

Exhaustive pattern matching

📖 Scenario: You are building a simple program to identify different shapes and calculate their areas. Each shape has a specific set of properties. You want to use exhaustive pattern matching to handle all shape types safely.

🎯 Goal: Create a TypeScript program that defines a union type for shapes, uses exhaustive pattern matching with match or switch statements, and calculates the area for each shape type.

📋 What You'll Learn

Define a union type Shape with three variants: circle, rectangle, and triangle.

Create a variable shape with a specific shape object.

Add a helper variable pi with the value 3.14.

Use a switch statement on shape.kind to calculate the area for each shape.

Include an exhaustive default case that throws an error if an unknown shape is encountered.

Print the calculated area.

💡 Why This Matters

🌍 Real World

Pattern matching helps safely handle different data types or variants in programs, such as processing different shapes, events, or messages.

💼 Career

Understanding exhaustive pattern matching is important for writing robust TypeScript code that handles all cases and avoids runtime errors.

1

Define the Shape union type and create a shape variable

Define a TypeScript union type called Shape with three variants: { kind: 'circle', radius: number }, { kind: 'rectangle', width: number, height: number }, and { kind: 'triangle', base: number, height: number }. Then create a variable called shape with the value { kind: 'circle', radius: 5 }.

Typescript

// Define the Shape type and create the shape variable
// Your code here

Hint

Use a union type with | to combine the three shape object types. Then assign the shape variable exactly as shown.

2

Add a helper variable for Pi

Create a constant variable called pi and set it to 3.14.

Typescript

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

const shape: Shape = { kind: 'circle', radius: 5 };

// Create a constant called pi with value 3.14
// Your code here

Hint

Use const pi = 3.14; to define the helper variable.

3

Use a switch statement for exhaustive pattern matching

Write a switch statement on shape.kind with cases for 'circle', 'rectangle', and 'triangle'. Calculate the area for each shape and store it in a variable called area. For 'circle', use pi * radius * radius. For 'rectangle', use width * height. For 'triangle', use 0.5 * base * height. Add a default case that throws an error with the message 'Unknown shape'.

Typescript

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

const shape: Shape = { kind: 'circle', radius: 5 };

const pi = 3.14;

// Use a switch on shape.kind to calculate area
// Your code here

Hint

Use switch (shape.kind) and assign the calculated area to area inside each case. Don't forget break; statements.

4

Print the calculated area

Write a console.log statement to print the text Area: followed by the value of the area variable.

Typescript

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

const shape: Shape = { kind: 'circle', radius: 5 };

const pi = 3.14;

let area: number;
switch (shape.kind) {
  case 'circle':
    area = pi * shape.radius * shape.radius;
    break;
  case 'rectangle':
    area = shape.width * shape.height;
    break;
  case 'triangle':
    area = 0.5 * shape.base * shape.height;
    break;
  default:
    throw new Error('Unknown shape');
}

// Print the area below
// Your code here

Hint

Use console.log("Area:", area); to print the result.

Practice

1.

What is the main purpose of exhaustive pattern matching in TypeScript?

easy

A. To allow dynamic typing in TypeScript

B. To ensure all possible cases of a union type are handled

C. To improve runtime performance by skipping cases

D. To automatically generate switch cases

Solution

1. Step 1: Understand union types and pattern matching

   Exhaustive pattern matching ensures every variant of a union type is explicitly handled in code.

2. Step 2: Identify the purpose of exhaustive checks

   This prevents missing cases that could cause bugs or unexpected behavior.

3. Final Answer:

   To ensure all possible cases of a union type are handled -> Option B

4. Quick Check:

   Exhaustive pattern matching = handle all cases [OK]

Hint: Exhaustive means covering every case without missing any [OK]

Common Mistakes:

• Thinking it improves runtime speed
• Confusing with dynamic typing
• Assuming it auto-generates code

2.

Which of the following switch statements correctly uses exhaustive pattern matching for this union type?

type Shape = 'circle' | 'square' | 'triangle';

easy

A. switch(shape) { case 'circle': break; case 'square': break; case 'triangle': break; }

B. switch(shape) { case 'circle': break; case 'square': break; default: break; }

C. switch(shape) { case 'circle': break; case 'square': break; case 'triangle': break; default: const _exhaustiveCheck: never = shape; }

D. switch(shape) { case 'circle': break; case 'square': break; case 'triangle': break; default: console.log('unknown'); }

Solution

1. Step 1: Check all cases are handled

   Cases for 'circle', 'square', and 'triangle' are present in options B, C, and D.

2. Step 2: Verify exhaustive check with never type

   Only switch(shape) { case 'circle': break; case 'square': break; case 'triangle': break; default: const _exhaustiveCheck: never = shape; } uses default with const _exhaustiveCheck: never = shape; to enforce exhaustiveness.

3. Final Answer:

   switch with all cases and default assigning to never -> Option C

4. Quick Check:

   Exhaustive switch = all cases + never default [OK]

Hint: Look for default assigning to never for exhaustiveness [OK]

Common Mistakes:

• Omitting the default case with never assignment
• Using default without never type
• Missing one of the union cases

3.

What will be the output of this TypeScript code?

type Status = 'success' | 'error';
function handleStatus(status: Status) {
  switch (status) {
    case 'success':
      return 'Yay!';
    case 'error':
      return 'Oops!';
    default:
      const _exhaustiveCheck: never = status;
      return _exhaustiveCheck;
  }
}
console.log(handleStatus('success'));

medium

A. Compilation error

B. "Oops!"

C. Runtime error

D. "Yay!"

Solution

1. Step 1: Analyze the switch cases for 'success'

   The input is 'success', so the first case matches and returns 'Yay!'.

2. Step 2: Check the default case usage

   The default case is unreachable here but ensures exhaustiveness by assigning to never.

3. Final Answer:

   "Yay!" -> Option D

4. Quick Check:

   Input 'success' returns 'Yay!' [OK]

Hint: Match input case to return value directly [OK]

Common Mistakes:

• Thinking default case runs for valid inputs
• Expecting runtime or compile errors
• Confusing return values for cases

4.

Identify the error in this exhaustive pattern matching code:

type Direction = 'up' | 'down' | 'left' | 'right';
function move(dir: Direction) {
  switch (dir) {
    case 'up':
      return 'Moving up';
    case 'down':
      return 'Moving down';
    case 'left':
      return 'Moving left';
    default:
      const _exhaustiveCheck: never = dir;
      return _exhaustiveCheck;
  }
}

medium

A. Missing case for 'right' in the switch statement

B. Default case should not assign to never

C. Function should return void instead of string

D. Switch statement syntax is incorrect

Solution

1. Step 1: Check all union cases in switch

   Cases for 'up', 'down', and 'left' exist, but 'right' is missing.

2. Step 2: Understand the role of default with never

   The default assigns to never to catch unhandled cases, so missing 'right' causes a compile error.

3. Final Answer:

   Missing case for 'right' in the switch statement -> Option A

4. Quick Check:

   All union cases must be handled explicitly [OK]

Hint: Check if all union members have cases before default [OK]

Common Mistakes:

• Assuming default covers missing cases silently
• Misusing never assignment in default
• Ignoring missing union members

5.

Given this nested union type, which switch structure correctly uses exhaustive pattern matching to handle all cases?

type Animal = { type: 'dog'; breed: 'bulldog' | 'beagle' } | { type: 'cat'; color: 'black' | 'white' };

hard

A. switch(animal.type) {
case 'dog':
switch(animal.breed) {
case 'bulldog': break;
case 'beagle': break;
default: const _exhaustiveCheck: never = animal.breed;
}
break;
case 'cat':
switch(animal.color) {
case 'black': break;
case 'white': break;
default: const _exhaustiveCheck: never = animal.color;
}
break;
default: const _exhaustiveCheck: never = animal.type;
}

B. switch(animal.type) {
case 'dog':
if(animal.breed === 'bulldog' || animal.breed === 'beagle') break;
break;
case 'cat':
if(animal.color === 'black' || animal.color === 'white') break;
break;
default: const _exhaustiveCheck: never = animal.type;
}

C. switch(animal.type) {
case 'dog':
case 'cat':
break;
default: const _exhaustiveCheck: never = animal.type;
}

D. switch(animal.type) {
case 'dog':
switch(animal.breed) {
case 'bulldog': break;
default: const _exhaustiveCheck: never = animal.breed;
}
break;
case 'cat':
switch(animal.color) {
case 'black': break;
case 'white': break;
}
break;
default: const _exhaustiveCheck: never = animal.type;
}

Solution

1. Step 1: Check outer switch covers all 'type' cases

   Cases for 'dog' and 'cat' are present with default assigning to never.

2. Step 2: Check inner switches cover all nested union cases

   For 'dog', both 'bulldog' and 'beagle' are handled with default never; for 'cat', both 'black' and 'white' are handled similarly.

3. Step 3: Verify no missing cases in nested switches

   All nested union members are covered with exhaustive checks.

4. Final Answer:

   Nested switches with all cases and never defaults for both levels -> Option A

5. Quick Check:

   Nested exhaustive switches = all cases + never defaults [OK]

Hint: Use nested switches with never defaults for each union level [OK]

Common Mistakes:

• Skipping some nested union cases
• Using if conditions without exhaustive checks
• Missing never assignment in inner switches