Equality narrowing in Typescript - Step-by-Step Execution

Concept Flow - Equality narrowing

Start with variable of union type

↓

Check equality with specific value

Yes / No↓

Narrow type

↓

Use narrowed type

Equality narrowing checks if a variable equals a specific value, then narrows its type to that value inside the true branch.

Execution Sample

Typescript

function example(x: "hello" | number) {
  if (x === "hello") {
    return x.toUpperCase();
  } else {
    return x.toFixed(2);
  }
}

This code narrows variable x to "hello" inside the if, else x is number.

Execution Table

Step	Condition	Evaluation	Branch Taken	Type of x	Action	Output
1	x === "hello"	false	else	number	Call x.toFixed(2)	e.g. "3.14"
2	x === "hello"	true	if	"hello"	Call x.toUpperCase()	"HELLO"
3	x === "hello"	false	else	number	Call x.toFixed(2)	"42.00"

💡 Execution stops after returning from either if or else branch.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
x	"hello" or number	number (3.14)	"hello"	number (42)
Type of x	"hello" | number	number	"hello"	number

Key Moments - 3 Insights

Why can we call toUpperCase() on x inside the if but not outside?

Because the condition x === "hello" narrows x's type to the string literal "hello" inside the if branch, allowing string methods like toUpperCase(). Outside, x could be number or "hello".

What happens if the condition is false? What type is x then?

If the condition is false, x cannot be the string "hello", so TypeScript narrows x to number in the else branch, allowing number methods like toFixed().

Does equality narrowing work with variables or only literals?

Equality narrowing works with literals or constants that TypeScript can use to narrow types, not arbitrary variables.

Visual Quiz - 3 Questions

Look at the execution table, what is the type of x at Step 2?

A number

B "hello"

C string | number

D boolean

💡 Hint

Check the 'Type of x' column at Step 2 in the execution_table.

At which step does the condition x === "hello" evaluate to false?

A Step 1

B Step 2

C Step 3

D None

💡 Hint

Look at the 'Evaluation' column for false values in the execution_table.

If x was always the string "hello", what would the output be at Step 1?

A "HELLO"

B A number formatted string

C Error

D undefined

💡 Hint

Step 1 shows the else branch where x is number; if x was "hello", this branch wouldn't run.

Concept Snapshot

Equality narrowing in TypeScript:
- Use 'if (x === value)' to check a variable's value.
- Inside 'if', x's type narrows to that value.
- Else branch narrows x to exclude that value.
- Allows safe use of methods for narrowed types.
- Works with literals and constants.

Full Transcript

Equality narrowing in TypeScript lets you check if a variable equals a specific value and then safely use methods for that value's type inside the if branch. For example, if x is "hello" or number, checking if x === "hello" narrows x to the string "hello" inside the if, so you can call string methods like toUpperCase(). If false, x is narrowed to number in else, so number methods like toFixed() are safe. This helps avoid errors and write clearer code.

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