Discriminated union narrowing in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check the shape type using discriminated union.

Typescript

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

function area(shape: Shape) {
  if (shape.kind === [1]) {
    return Math.PI * shape.radius ** 2;
  }
  return shape.size * shape.size;
}

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

A'rectangle'

B'circle'

C'square'

D'triangle'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'square' instead of 'circle' in the if condition.

Checking for a kind value not defined in the union.

The discriminated union uses the 'kind' property to distinguish types. Here, checking for 'circle' allows access to 'radius'.

2fill in blank

medium

Complete the code to narrow the union using a switch statement.

Typescript

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

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

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

A'circle'

B'square'

C'triangle'

D'oval'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'square' in the case for radius calculation.

Using an undefined kind value.

The switch case must match the 'kind' value 'circle' to access radius for perimeter calculation.

3fill in blank

hard

Fix the error in the type narrowing to access the correct property.

Typescript

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

function describe(shape: Shape) {
  if (shape.kind === 'square') {
    return `Square with size ${shape.[1]`;
  } else {
    return `Circle with radius ${shape.radius}`;
  }
}

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

Aradius

Bwidth

Clength

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Accessing 'radius' on a square shape.

Using properties not defined in the type.

When shape.kind is 'square', the property to access is 'size', not 'radius'.

4fill in blank

hard

Fill both blanks to correctly narrow the union and access properties.

Typescript

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

function getInfo(shape: Shape) {
  if (shape.[1] === [2]) {
    return shape.radius;
  }
  return shape.size;
}

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

Akind

B'circle'

C'square'

Dradius

Attempts:

3 left

💡 Hint

Common Mistakes

Checking the wrong property name.

Comparing to the wrong kind value.

To narrow the union, check if shape.kind equals 'circle' to access radius; otherwise, access size.

5fill in blank

hard

Fill all three blanks to create a function that returns the area using discriminated union narrowing.

Typescript

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

function calculateArea(shape: Shape) {
  return {
    [1]: (shape.kind === [3] ? shape.[2] : shape.size),
    area: shape.kind === [3] ? Math.PI * shape.radius ** 2 : shape.size ** 2
  };
}

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

Adimension

Bradius

C'circle'

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names for keys or values.

Incorrectly checking the kind value.

The returned object uses 'dimension' as key, accesses 'radius' property, and checks if kind is 'circle' to calculate area.