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'.