The in operator narrowing in Typescript - Step-by-Step Execution

Concept Flow - The in operator narrowing

Start with union type variable

↓

Use 'in' operator to check property

↓

If property exists

↓

Narrow type to subtype with that property

↓

Use narrowed type safely

↓

Else

↓

Narrow type to other subtype

↓

Use narrowed type safely

↓

End

Check if a property exists in an object to tell TypeScript which subtype it is, so you can use it safely.

Execution Sample

Typescript

type Fish = { swim: () => void };
type Bird = { fly: () => void };
function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim();
  } else {
    animal.fly();
  }
}

This code uses 'in' to check if 'swim' is in animal, then calls swim or fly accordingly.

Execution Table

Step	Condition	'swim' in animal	Narrowed Type	Action	Output
1	animal = Fish { swim }	true	Fish	Call animal.swim()	swim() called
2	animal = Bird { fly }	false	Bird	Call animal.fly()	fly() called
3	No more animals	N/A	N/A	Exit function	End

💡 All union cases checked, function ends.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
animal	Fish | Bird	Fish (swim)	Bird (fly)	N/A

Key Moments - 3 Insights

Why does TypeScript allow calling animal.swim() only inside the 'if' block?

Because the 'in' operator check ('swim' in animal) narrows the type to Fish, so TypeScript knows animal has swim() there (see execution_table step 1).

What happens if you try to call animal.fly() inside the 'if' block?

TypeScript will give an error because inside the 'if' block animal is narrowed to Fish, which does not have fly() (see execution_table step 1).

Can the 'in' operator check be used with any property name?

Yes, but it only narrows the type if the property uniquely identifies one subtype in the union (see concept_flow).

Visual Quiz - 3 Questions

Look at the execution_table, what is the narrowed type when 'swim' in animal is true?

A Bird

B Fish

C Fish | Bird

D Unknown

💡 Hint

Check the 'Narrowed Type' column in execution_table row 1.

At which step does the function call animal.fly()?

A Step 1

B Step 3

C Step 2

D Never

💡 Hint

Look at the 'Action' column in execution_table row 2.

If the animal object had both 'swim' and 'fly' properties, what would the 'in' operator narrowing do?

A TypeScript cannot narrow because both properties exist

B Narrow to Bird only

C Narrow to Fish because 'swim' checked first

D Narrow to Fish only

💡 Hint

Think about how 'in' operator narrowing works when properties overlap.

Concept Snapshot

Use 'in' operator to check if a property exists in a union type.
If true, TypeScript narrows the variable to the subtype with that property.
This lets you safely access that property's methods or fields.
Else, it narrows to the other subtype(s).
Example: if ('swim' in animal) { animal.swim(); } else { animal.fly(); }

Full Transcript

This visual execution shows how TypeScript uses the 'in' operator to narrow union types. We start with a variable that can be Fish or Bird. We check if 'swim' is in the variable. If yes, TypeScript knows it's a Fish and lets us call swim(). If no, it must be a Bird, so we call fly(). The execution table shows each step with the condition, narrowed type, and action. The variable tracker shows how the variable's type changes after each check. Key moments clarify why narrowing works only inside the correct branches. The quiz tests understanding of narrowing and behavior when properties overlap.