Equality narrowing in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using equality narrowing?

Consider the following TypeScript code that uses equality narrowing with a union type. What will be printed to the console?

Typescript

function checkValue(x: string | number) {
  if (x === 42) {
    console.log("Number 42 detected");
  } else {
    console.log("Other value");
  }
}
checkValue(42);
checkValue("42");

A Number 42 detected\nOther value

B Other value\nNumber 42 detected

C Number 42 detected\nNumber 42 detected

D Other value\nOther value

💡 Hint

Think about how strict equality (===) works with different types in TypeScript.

The check x === 42 only passes if x is the number 42. When x is the string "42", the condition fails, so the else branch runs.

❓ Predict Output

intermediate

What does this TypeScript code print when using equality narrowing with null?

Look at this TypeScript function that narrows a value using equality checks. What will be the output?

Typescript

function processValue(val: string | null) {
  if (val == null) {
    console.log("Value is null or undefined");
  } else {
    console.log(val.toUpperCase());
  }
}
processValue(null);
processValue("hello");

A Error at runtime\nHELLO

B Value is null or undefined\nhello

C Value is null or undefined\nHELLO

D Value is null or undefined\nError at runtime

💡 Hint

Remember that == null checks for both null and undefined.

The first call passes null, so the first branch runs. The second call passes a string, so the else branch runs and prints the uppercase string.

🔧 Debug

advanced

Why does this TypeScript code cause a runtime error despite equality narrowing?

Examine the code below. It uses equality narrowing but causes a runtime error. What is the cause?

Typescript

function printLength(x: string | number | null) {
  if (x !== null) {
    if (x === 42) {
      console.log("The answer");
    } else {
      console.log(x.length);
    }
  } else {
    console.log("No value");
  }
}
printLength(10);

A Runtime error because number 10 has no 'length' property

B Syntax error due to missing type annotation

C No error, prints 'No value'

D Runtime error because null is accessed

💡 Hint

Check what properties exist on numbers versus strings.

The else branch tries to access x.length, but x can be a number (like 10) which has no length property, causing a runtime error.

📝 Syntax

advanced

Which option correctly uses equality narrowing to check for a boolean value?

You want to run code only if a variable is exactly the boolean true. Which code snippet correctly uses equality narrowing?

A if (val == true) { console.log("It's true"); }

B if (val === true) { console.log("It's true"); }

C if (val) { console.log("It's true"); }

D if (val === 'true') { console.log("It's true"); }

💡 Hint

Strict equality checks both type and value.

Only option B uses strict equality to check that val is exactly the boolean true, not just truthy or a string.

🚀 Application

expert

How many items are in the resulting array after filtering with equality narrowing?

Given this TypeScript code that filters an array using equality narrowing, how many items remain in the filtered array?

Typescript

const mixed: (string | number | null)[] = [null, 0, "", 42, "hello"];
const filtered = mixed.filter(x => x != null && x !== 0 && x !== "");
console.log(filtered.length);

A 1

B 3

C 4

D 2

💡 Hint

Count items that are not null, not zero, and not empty string.

The filtered array excludes null, 0, and "". Remaining items are 42 and "hello", so length is 2.