Method overriding with types in Typescript - Step-by-Step Execution

Concept Flow - Method overriding with types

Define Base Class with Method

↓

Define Derived Class

↓

Override Method in Derived Class

↓

Call Method on Derived Instance

↓

Derived Method Executes

↓

Return Result with Derived Type

Shows how a derived class replaces a base class method with a new version that can have a more specific type.

Execution Sample

Typescript

class Animal {
  speak(): string {
    return "Animal sound";
  }
}

class Dog extends Animal {
  speak(): "bark" {
    return "bark";
  }
}

const pet: Animal = new Dog();
console.log(pet.speak());

Defines a base class Animal with a speak method, then a Dog class overrides speak with a more specific return type.

Execution Table

Step	Action	Evaluation	Result
1	Define class Animal with speak()	Method returns string	Animal.speak() returns "Animal sound"
2	Define class Dog extends Animal	Override speak() with return type "bark"	Dog.speak() returns "bark"
3	Create pet as Animal type but instance of Dog	pet is Animal reference to Dog object	pet points to Dog instance
4	Call pet.speak()	Calls Dog's overridden speak()	Returns "bark"
5	Print result	Output to console	bark

💡 Execution stops after printing the overridden method's return value.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
pet	undefined	Dog instance (as Animal)	Dog instance (as Animal)	Dog instance (as Animal)

Key Moments - 2 Insights

Why does pet.speak() call Dog's method even though pet is typed as Animal?

Because the actual object is a Dog instance, method calls use the object's method, not the variable's type (see execution_table step 4).

Can the overridden method in Dog have a more specific return type than in Animal?

Yes, TypeScript allows the derived method to return a subtype or literal type (see Dog.speak() returns "bark" vs Animal.speak() returns string).

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what does pet.speak() return?

A "bark"

B "Animal sound"

C undefined

D Error

💡 Hint

Check the 'Result' column at step 4 in execution_table.

At which step is the pet variable assigned a Dog instance?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at variable_tracker and execution_table step 3.

If Dog.speak() returned a number instead of "bark", what would happen?

A The base class method would be called instead

B It would work fine

C TypeScript would give a type error

D The program would crash

💡 Hint

Method overriding requires compatible return types (see key_moments about return types).

Concept Snapshot

Method overriding lets a derived class replace a base class method.
The derived method can have a more specific return type.
Calls use the actual object's method, not the variable's type.
TypeScript checks that overridden methods keep compatible types.
This enables polymorphism with type safety.

Full Transcript

This example shows method overriding with types in TypeScript. We start by defining a base class Animal with a method speak() that returns a string. Then we define a derived class Dog that overrides speak() to return the specific string literal "bark". We create a variable pet typed as Animal but assign it a Dog instance. When we call pet.speak(), the Dog's overridden method runs, returning "bark". This works because method calls use the actual object's method, not the variable's type. TypeScript allows the derived method to have a more specific return type, ensuring type safety. The execution table traces each step, showing how the variable pet changes and how the method call resolves. Key moments clarify why the overridden method runs and how return types work. The visual quiz tests understanding of these points. This teaches how method overriding with types enables flexible and safe polymorphism in TypeScript.