Equality narrowing in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if the variable is a string.

Typescript

function checkType(x: string | number) {
  if (typeof x === [1]) {
    return x.toUpperCase();
  }
  return x;
}

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

A"object"

B"number"

C"string"

D"boolean"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' without quotes

Checking for 'text' instead of 'string'

Using typeof x === string (missing quotes)

The typeof operator returns a string indicating the type. To check if x is a string, compare it to "string".

2fill in blank

medium

Complete the code to narrow the type using equality check.

Typescript

function process(value: string | null) {
  if (value [1] null) {
    return value.toLowerCase();
  }
  return "No value";
}

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

A!=

B===

C==

D!==

Attempts:

3 left

💡 Hint

Common Mistakes

Using == instead of === or !==

Calling string methods on null values

Confusing === and !== operators

Use !== for strict inequality to check if value is not null. This narrows the type to string, allowing safe use of toLowerCase().

3fill in blank

hard

Fix the error in the equality narrowing condition.

Typescript

function example(input: string | number) {
  if (typeof input [1] "string") {
    return input.toLowerCase();
  }
  return input;
}

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

A!=

B===

C!==

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Using == instead of ===

Comparing value directly to "string" instead of using typeof

Using !== instead of ===

Use the strict equality operator === with typeof input to check if input is a string. This narrows the type to string.

4fill in blank

hard

Fill both blanks to correctly narrow the type and use the value.

Typescript

function handle(input: string | number) {
  if (typeof input [1] [2]) {
    return input.toUpperCase();
  }
  return input.toFixed(2);
}

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

A===

B"string"

C"number"

D!==

Attempts:

3 left

💡 Hint

Common Mistakes

Using !== instead of ===

Using 'number' instead of 'string' in the check

Missing quotes around the type string

To check if input is a string, use typeof input === "string". This narrows the type so you can safely call string methods like toUpperCase().

5fill in blank

hard

Fill all three blanks to correctly narrow types and handle both cases.

Typescript

function format(value: string | number | null) {
  if (value [1] null) {
    if (typeof value [2] [3]) {
      return value.toUpperCase();
    }
    return value.toFixed(1);
  }
  return "No value";
}

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

A!==

B===

C"string"

D"number"

Attempts:

3 left

💡 Hint

Common Mistakes

Using == instead of !== for null check

Mixing up === and !== in type checks

Calling string methods on numbers or null

First, check that value is not null using !== null. Then check if value is a string with typeof value === "string". This lets you safely call toUpperCase(). Otherwise, assume it's a number and call toFixed(1).