Exhaustive pattern matching in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to match the shape type using a switch statement.

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 * shape.radius;
    case [1]:
      return shape.size * shape.size;
  }
}

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

A'rectangle'

B'triangle'

C'square'

D'circle'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'circle' again instead of 'square'.

Using a kind not defined in the Shape type.

The switch must handle the 'square' kind to calculate its area correctly.

2fill in blank

medium

Complete the code to add a default case that throws an error for unknown shapes.

Typescript

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius * shape.radius;
    case 'square':
      return shape.size * shape.size;
    default:
      throw new Error([1]);
  }
}

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

Ashape.kind

B'Invalid shape'

C'Shape not supported'

D'Unknown shape kind'

Attempts:

3 left

💡 Hint

Common Mistakes

Throwing the shape.kind directly instead of a string message.

Not including a default case.

The default case should throw an error with a clear message like 'Unknown shape kind'.

3fill in blank

hard

Fix the error in the exhaustive check by adding a never type assertion.

Typescript

function assertNever(x: never): never {
  throw new Error('Unexpected object: ' + x);
}

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius * shape.radius;
    case 'square':
      return shape.size * shape.size;
    default:
      return [1];
  }
}

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

Anull

BassertNever(shape)

Cthrow new Error('Invalid shape')

Dshape

Attempts:

3 left

💡 Hint

Common Mistakes

Returning shape directly causes a type error.

Throwing an error without using assertNever loses exhaustiveness checking.

Using assertNever ensures the compiler checks that all cases are handled.

4fill in blank

hard

Fill both blanks to create an exhaustive switch that returns the perimeter of the shape.

Typescript

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

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

A'circle'

B'triangle'

C'square'

D'rectangle'

Attempts:

3 left

💡 Hint

Common Mistakes

Using kinds not defined in Shape.

Swapping the order of kinds.

The switch must handle 'circle' and 'square' kinds to calculate perimeter correctly.

5fill in blank

hard

Fill all three blanks to create an exhaustive pattern match with a never check.

Typescript

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 [1]:
      return Math.PI * shape.radius * shape.radius;
    case [2]:
      return shape.size * shape.size;
    case [3]:
      return shape.width * shape.height;
    default:
      return assertNever(shape);
  }
}

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

A'circle'

B'square'

C'rectangle'

D'triangle'

Attempts:

3 left

💡 Hint

Common Mistakes

Missing the 'rectangle' case.

Including a kind not in the Shape type.

All shape kinds must be handled: 'circle', 'square', and 'rectangle'.

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