Polymorphism through interfaces in Typescript - Step-by-Step Execution

Concept Flow - Polymorphism through interfaces

Define Interface

↓

Create Classes implementing Interface

↓

Use Interface type variable

↓

Assign different class instances

↓

Call interface method

↓

Run class-specific method implementation

This flow shows how an interface defines a method, classes implement it differently, and a variable of interface type calls the method polymorphically.

Execution Sample

Typescript

interface Animal {
  speak(): string;
}

class Dog implements Animal {
  speak() { return "Woof!"; }
}

class Cat implements Animal {
  speak() { return "Meow!"; }
}

function makeItSpeak(animal: Animal) {
  console.log(animal.speak());
}

makeItSpeak(new Dog());
makeItSpeak(new Cat());

This code shows two classes implementing the same interface and a function calling their speak method polymorphically.

Execution Table

Step	Action	Variable/Instance	Method Called	Output
1	Define interface Animal with speak()	-	-	-
2	Define class Dog implementing Animal	Dog	-	-
3	Define class Cat implementing Animal	Cat	-	-
4	Call makeItSpeak with new Dog()	animal = Dog instance	speak()	Woof!
5	Call makeItSpeak with new Cat()	animal = Cat instance	speak()	Meow!
6	End of calls	-	-	-

💡 All calls to makeItSpeak finished, demonstrating polymorphism through interface.

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
animal	undefined	Dog instance	Cat instance	undefined

Key Moments - 2 Insights

Why can the same function makeItSpeak accept both Dog and Cat instances?

Because both Dog and Cat implement the Animal interface, makeItSpeak accepts any object that follows that interface, as shown in steps 4 and 5.

How does the program know which speak() method to call?

At runtime, the speak() method of the actual object instance (Dog or Cat) is called, demonstrating polymorphism (see steps 4 and 5 outputs).

Visual Quiz - 3 Questions

Look at the execution table, what is the output when makeItSpeak is called with a Dog instance?

A "Woof!"

B "Meow!"

C "Animal speaks"

D No output

💡 Hint

Check step 4 in the execution_table where Dog's speak() is called.

At which step does the variable 'animal' hold a Cat instance?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Look at variable_tracker and execution_table rows for step 5.

If a new class Bird implements Animal with speak() returning "Tweet!", what would makeItSpeak(new Bird()) output?

A "Woof!"

B "Meow!"

C "Tweet!"

D Error, Bird not recognized

💡 Hint

Polymorphism allows any class implementing Animal to be used, see concept_flow and execution_table.

Concept Snapshot

interface Animal { speak(): string; }
class Dog implements Animal { speak() { return "Woof!"; } }
class Cat implements Animal { speak() { return "Meow!"; } }
function makeItSpeak(animal: Animal) { console.log(animal.speak()); }
makeItSpeak(new Dog()); // Woof!
makeItSpeak(new Cat()); // Meow!

Key: Interface defines method, classes implement differently, function uses interface type to call polymorphically.

Full Transcript

Polymorphism through interfaces means we define a common method in an interface. Classes implement this interface with their own version of the method. A function can accept any object that implements the interface and call the method. At runtime, the correct method for the actual object is called. In the example, Dog and Cat classes implement Animal interface with speak() method. The function makeItSpeak takes an Animal and calls speak(). When called with Dog, it prints Woof!. When called with Cat, it prints Meow!. This shows how one interface type variable can hold different class instances and call their specific methods.