typeof type guards in Typescript - Step-by-Step Execution

Concept Flow - typeof type guards

Start with variable

↓

Check typeof variable

↓

Handle string

↓

End

Check the type of a variable using typeof, then run code based on the type.

Execution Sample

Typescript

function printValue(x: string | number) {
  if (typeof x === 'string') {
    console.log('String:', x.toUpperCase());
  } else {
    console.log('Number:', x.toFixed(2));
  }
}

This code checks if x is a string or number and prints it differently.

Execution Table

Step	Variable x	Condition	Condition Result	Branch Taken	Output
1	'hello'	typeof x === 'string'	true	if branch	String: HELLO
2	42	typeof x === 'string'	false	else branch	Number: 42.00
3	true	typeof x === 'string'	false	else branch	Number: Error (not handled)

💡 Execution stops after handling each input once.

Variable Tracker

Variable x	Start	After Step 1	After Step 2	After Step 3
x	undefined	'hello'	42	true

Key Moments - 2 Insights

Why does the code use typeof x === 'string' instead of x instanceof String?

typeof checks the primitive type directly, which works for string literals. instanceof checks object wrappers, which is less common and can cause confusion. See execution_table step 1 for typeof usage.

What happens if x is a boolean like true?

The else branch runs because typeof x === 'string' is false, but the code assumes number in else, causing an error. See execution_table step 3.

Visual Quiz - 3 Questions

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

A String: hello

B Number: 42.00

C String: HELLO

D Error

💡 Hint

Check row 1 in execution_table under Output column.

At which step does the condition typeof x === 'string' evaluate to false?

A Step 1

B Step 3

C Step 2

D None

💡 Hint

Look at Condition Result column in execution_table for steps 2 and 3.

If we add a check for typeof x === 'boolean', what would change in the execution table?

A Step 1 would change output

B Step 3 would take a new branch for boolean

C Step 2 would become true

D No change

💡 Hint

Refer to key_moments about boolean input and execution_table step 3.

Concept Snapshot

typeof type guards check a variable's type at runtime.
Syntax: if (typeof x === 'string') { ... } else { ... }
Allows safe use of type-specific methods.
Common types: 'string', 'number', 'boolean', 'undefined', 'object', 'function'.
Use to avoid errors when handling union types.

Full Transcript

This example shows how to use typeof type guards in TypeScript. The function printValue takes a variable x that can be a string or number. It checks if x is a string using typeof x === 'string'. If true, it prints the uppercase string. Otherwise, it treats x as a number and prints it with two decimals. The execution table shows three steps with different x values: 'hello', 42, and true. For 'hello', the condition is true and prints the uppercase string. For 42, the condition is false and prints the number. For true, the condition is false but the code assumes number, which can cause an error. The variable tracker shows how x changes each step. Key moments explain why typeof is used and what happens with unexpected types. The quiz tests understanding of outputs and condition results. The snapshot summarizes how typeof type guards work to safely handle different types in code.