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

Concept Flow - instanceof type guards

Start with variable

↓

Check: variable instanceof Class?

No→Else branch

Yes↓

Inside if: variable treated as Class type

↓

Use variable with Class properties/methods

↓

End

The program checks if a variable is an instance of a class. If yes, it treats the variable as that class type inside the if block.

Execution Sample

Typescript

class Cat {
  meow() { return 'meow'; }
}

const pet = new Cat();

if (pet instanceof Cat) {
  console.log(pet.meow());
}

This code checks if pet is an instance of Cat, then calls the meow method safely.

Execution Table

Step	Action	Evaluation	Result
1	Create class Cat	N/A	Class Cat defined
2	Create pet = new Cat()	pet instanceof Cat	true
3	Check if pet instanceof Cat	true	Enter if block
4	Call pet.meow()	pet.meow()	'meow' printed
5	End	N/A	Program ends

💡 No exit from if because pet is instance of Cat

Variable Tracker

Variable	Start	After 1	After 2	Final
pet	undefined	Cat instance	Cat instance	Cat instance

Key Moments - 2 Insights

Why can we call pet.meow() inside the if block?

Because the instanceof check (see step 3 in execution_table) confirms pet is a Cat, so TypeScript knows pet has the meow method.

What happens if pet is not an instance of Cat?

The if condition fails (step 3), so the code inside the if block does not run, preventing errors from calling meow on a wrong type.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result of 'pet instanceof Cat' at step 2?

A undefined

B false

C true

D error

💡 Hint

Check the 'Evaluation' column at step 2 in execution_table

At which step does the program enter the if block?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Result' column in execution_table for step 3

If pet was not an instance of Cat, what would happen to the call pet.meow()?

A It would be skipped because the if block is not entered

B It would run normally

C It would cause a runtime error

D It would print undefined

💡 Hint

Refer to key_moments about what happens if instanceof check fails

Concept Snapshot

instanceof type guards check if a variable is an instance of a class.
Syntax: if (variable instanceof Class) { /* variable treated as Class */ }
Inside the if block, TypeScript knows the variable has Class properties/methods.
Prevents errors by narrowing types safely at runtime.

Full Transcript

This visual trace shows how instanceof type guards work in TypeScript. First, a class Cat is defined. Then, a variable pet is created as an instance of Cat. The program checks if pet is an instance of Cat using 'pet instanceof Cat'. Since this is true, the code inside the if block runs, allowing safe use of pet.meow(). The variable tracker shows pet starts undefined and becomes a Cat instance. Key moments explain why the method call is safe and what happens if the check fails. The quizzes test understanding of the instanceof check result, when the if block runs, and behavior if the check fails.