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.