Extending classes with types in Typescript - Step-by-Step Execution

Concept Flow - Extending classes with types

Define Base Class

↓

Define Derived Class extends Base

↓

Derived inherits properties/methods

↓

Create instance of Derived

↓

Access inherited and own members

This flow shows how a derived class extends a base class, inheriting its properties and methods, and how instances of the derived class can use both.

Execution Sample

Typescript

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak() { return `${this.name} makes a sound.`; }
}

class Dog extends Animal {
  speak() { return `${this.name} barks.`; }
}

const dog = new Dog("Buddy");
console.log(dog.speak());

Defines a base class Animal and a derived class Dog that overrides speak(). Creates a Dog instance and calls speak().

Execution Table

Step	Action	Evaluation	Result
1	Define class Animal with property name and method speak	N/A	Animal class created
2	Define class Dog extending Animal, override speak method	N/A	Dog class created, inherits Animal
3	Create instance dog = new Dog("Buddy")	Dog constructor calls Animal constructor	dog.name = "Buddy"
4	Call dog.speak()	Dog's speak() overrides Animal's	"Buddy barks."
5	Output result	console.log prints	Buddy barks.

💡 Execution ends after printing the dog's speak output.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
dog	undefined	{name: "Buddy"}	N/A	{name: "Buddy"}

Key Moments - 2 Insights

Why does dog.speak() use the Dog version, not Animal's?

Because Dog overrides speak(), so when called on a Dog instance (see execution_table step 4), the Dog version runs.

How does Dog get the name property if it is only defined in Animal?

Dog extends Animal, so it inherits Animal's properties. The Animal constructor sets name when Dog calls super(name) (step 3).

Visual Quiz - 3 Questions

Look at the execution_table step 3, what is the value of dog.name after creation?

A undefined

B "Dog"

C "Buddy"

D null

💡 Hint

Check variable_tracker row for dog after step 3.

At which step does the Dog class override the speak method?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at execution_table step 2 where Dog class is defined.

If Dog did not override speak(), what would dog.speak() output at step 4?

A "Buddy barks."

B "Buddy makes a sound."

C Error: speak not found

D "Dog makes a sound."

💡 Hint

Refer to execution_table step 4 and how overriding works.

Concept Snapshot

class Base {
  prop: type;
  constructor(...) { ... }
  method() { ... }
}
class Derived extends Base {
  method() { ... } // override
}

Derived inherits Base's props and methods, can override them.

Full Transcript

This example shows how in TypeScript a class can extend another class to inherit its properties and methods. The base class Animal has a name property and a speak method. The derived class Dog extends Animal and overrides the speak method to provide a different message. When we create a Dog instance with name "Buddy" and call speak, the Dog's version runs, printing "Buddy barks.". This demonstrates inheritance and method overriding in classes with types.