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.

Practice

1. What does equality narrowing in TypeScript help you do?

easy

A. It lets TypeScript know the exact type after checking equality.

B. It automatically converts types without checks.

C. It disables type checking for variables.

D. It only works with numbers, not strings.

Solution

1. Step 1: Understand equality narrowing concept

   Equality narrowing means TypeScript uses equality checks (like ===) to know the exact type of a variable.

2. Step 2: Compare options with definition

   Only It lets TypeScript know the exact type after checking equality. correctly describes this behavior. Others are incorrect or unrelated.

3. Final Answer:

   It lets TypeScript know the exact type after checking equality. -> Option A

4. Quick Check:

   Equality narrowing = exact type after equality check [OK]

Hint: Equality narrowing means type known after === check [OK]

Common Mistakes:

• Thinking it converts types automatically
• Believing it disables type checking
• Assuming it only works for numbers

2. Which of the following is the correct syntax to check equality for narrowing in TypeScript?

easy

A. if (value === 10) { }

B. if (value = 10) { }

C. if (value == 10) { }

D. if (value != 10) { }

Solution

1. Step 1: Identify correct equality operator for narrowing

   TypeScript uses strict equality === for safe type narrowing.

2. Step 2: Check each option

   if (value === 10) { } uses ===, which is correct. if (value == 10) { } uses loose equality, which is less safe. if (value = 10) { } is assignment, not comparison. if (value != 10) { } is inequality, not equality.

3. Final Answer:

   if (value === 10) { } -> Option A

4. Quick Check:

   Use === for equality narrowing [OK]

Hint: Use === for equality narrowing, not == or = [OK]

Common Mistakes:

• Using = instead of ===
• Using == which is not strict
• Confusing != with ===

3. What will be the output of this TypeScript code?

function check(x: string | number) {
  if (typeof x === 'string') {
    return x.toUpperCase();
  } else {
    return x.toFixed(2);
  }
}
console.log(check(3.14159));

medium

A. "3.14" (error)

B. "3.14" (string)

C. "3.14"

D. "3.14" (number)

Solution

1. Step 1: Understand type narrowing in function

   The function checks if x is a string or number using typeof. For number, it calls toFixed(2).

2. Step 2: Evaluate output for input 3.14159

   Since input is number, it returns 3.14159.toFixed(2) which is string "3.14".

3. Final Answer:

   "3.14" -> Option C

4. Quick Check:

   Number input returns toFixed string "3.14" [OK]

Hint: toFixed returns string, so output is "3.14" [OK]

Common Mistakes:

• Thinking toFixed returns number
• Confusing string and number output
• Ignoring type narrowing with typeof

4. Identify the error in this TypeScript code using equality narrowing:

function process(value: string | number) {
  if (value === 'hello') {
    return value.toUpperCase();
  } else {
    return value.toUpperCase();
  }
}

medium

A. Error: should use == instead of ===.

B. No error, code is correct.

C. Error: missing else if for number type.

D. Error: calling toUpperCase on number in else block.

Solution

1. Step 1: Analyze type narrowing with equality check

   The check value === 'hello' narrows value to string only if it equals 'hello'. Else block still has value as string or number.

2. Step 2: Identify error in else block

   Calling toUpperCase() on value in else block is unsafe because value could be number, causing runtime error.

3. Final Answer:

   Error: calling toUpperCase on number in else block. -> Option D

4. Quick Check:

   toUpperCase on number causes error [OK]

Hint: Check types before calling string methods [OK]

Common Mistakes:

• Assuming else block is string only
• Using == instead of === for narrowing
• Ignoring runtime errors from wrong method calls

5. Given this TypeScript code, what is the correct way to safely handle both types using equality narrowing?

function formatValue(val: string | number | null) {
  if (val === null) {
    return "No value";
  } else if (typeof val === 'string') {
    return val.trim();
  } else {
    return val.toFixed(1);
  }
}

hard

A. Missing check for undefined, so unsafe.

B. Code is correct and safely narrows all types.

C. Should use == null instead of === null for null check.

D. toFixed should be called only after checking val is number.

Solution

1. Step 1: Check null handling

   The first if checks val === null, safely handling null case.

2. Step 2: Check type narrowing for string and number

   The else if uses typeof val === 'string' to narrow string, else block handles number with toFixed(1).

3. Step 3: Confirm all cases covered

   All possible types (null, string, number) are handled safely with proper narrowing.

4. Final Answer:

   Code is correct and safely narrows all types. -> Option B

5. Quick Check:

   All types handled safely with === and typeof [OK]

Hint: Check null first, then typeof for string, else number [OK]

Common Mistakes:

• Forgetting null check
• Using == null which includes undefined
• Calling toFixed without type check