Type narrowing with typeof in Typescript - Step-by-Step Execution

Concept Flow - Type narrowing with typeof

Start with variable of union type

↓

Check typeof variable

↓

Narrow to string

↓

Use string methods

↓

End

We start with a variable that can be multiple types. Using typeof checks its actual type at runtime, then we safely use methods or operations for that specific type.

Execution Sample

Typescript

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

This function checks if x is a string or number, then uses string or number methods accordingly.

Execution Table

Step	Action	typeof x	Condition	Branch Taken	Output
1	Input x = 'hello'	string	typeof x === 'string'?	Yes	'HELLO'
2	Return x.toUpperCase()	string	-	-	'HELLO'
3	Input x = 3.1415	number	typeof x === 'string'?	No	-
4	Else branch: return x.toFixed(2)	number	-	-	'3.14'

💡 All branches return output based on narrowed type; execution ends after return.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
x	string | number	'hello'	3.1415	N/A
typeof x	N/A	string	number	N/A
Output	N/A	'HELLO'	N/A	'3.14'

Key Moments - 2 Insights

Why can we call toUpperCase() only after checking typeof x === 'string'?

Because before the check, x could be string or number. The typeof check narrows x to string only in that branch, so calling toUpperCase() is safe (see execution_table step 1 and 2).

What happens if we try to call toFixed() without narrowing?

TypeScript would give an error because toFixed() exists only on numbers. Narrowing with typeof ensures we only call it when x is a number (see execution_table step 3 and 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the output when x = 'hello' at step 2?

A 'Hello'

B 'hello'

C 'HELLO'

D Error

💡 Hint

Check the Output column at step 2 in execution_table.

At which step does the typeof check fail for x = 3.1415?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the Condition and Branch Taken columns for x = 3.1415 in execution_table.

If we remove the typeof check, what would happen when calling toUpperCase() on x?

A TypeScript error because x might be number

B Runtime error only

C It works fine for all types

D No output

💡 Hint

Refer to key_moments about calling methods without narrowing.

Concept Snapshot

Type narrowing with typeof:
- Use typeof to check variable type at runtime.
- Narrow union types to specific types inside if branches.
- Safely call methods or operations for narrowed type.
- Example: if(typeof x === 'string') { x.toUpperCase() } else { x.toFixed(2) }

Full Transcript

This visual execution shows how TypeScript uses typeof to narrow variable types. Starting with a variable x that can be string or number, the program checks typeof x. If x is string, it calls toUpperCase(), else it calls toFixed(2) for numbers. The execution table traces each step with input values, conditions, branches taken, and outputs. Variable tracker shows how x and output change. Key moments clarify why narrowing is needed to avoid errors. The quiz tests understanding of output and narrowing steps. This helps beginners see how typeof guides safe code paths.