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.

Practice

1. What does the extends keyword do in TypeScript class definitions?

easy

A. It imports a module into the class.

B. It defines a new interface for a class.

C. It creates a new class that inherits properties and methods from an existing class.

D. It declares a variable inside a class.

Solution

1. Step 1: Understand the role of extends

   The extends keyword is used to create a new class that inherits from an existing class, gaining its properties and methods.

2. Step 2: Differentiate from other keywords

   Other options describe unrelated concepts: interfaces, variables, or modules, which are not what extends does.

3. Final Answer:

   It creates a new class that inherits properties and methods from an existing class. -> Option C

4. Quick Check:

   extends means inheritance [OK]

Hint: Remember: extends means 'is a' relationship in classes [OK]

Common Mistakes:

• Confusing extends with interface implementation
• Thinking extends imports modules
• Using extends to declare variables

2. Which of the following is the correct syntax to extend a class named Animal in TypeScript?

easy

A. class Dog extends Animal {}

B. class Dog inherits Animal {}

C. class Dog implements Animal {}

D. class Dog import Animal {}

Solution

1. Step 1: Recall correct syntax for class extension

   In TypeScript, the keyword to extend a class is extends, so the syntax is class Dog extends Animal {}.

2. Step 2: Identify incorrect options

   inherits is not a TypeScript keyword, implements is for interfaces, and import is for modules.

3. Final Answer:

   class Dog extends Animal {} -> Option A

4. Quick Check:

   Use extends to inherit classes [OK]

Hint: Use 'extends' keyword to inherit classes, not 'inherits' or 'implements' [OK]

Common Mistakes:

• Using 'inherits' instead of 'extends'
• Confusing 'implements' with 'extends'
• Trying to import classes inside class declaration

3. What will be the output of this TypeScript code?

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}

class Student extends Person {
  constructor(name: string) {
    super(name);
  }
}

const s = new Student('Anna');
console.log(s.greet());

medium

A. Hello, undefined

B. Hello, Anna

C. Error: super() not called

D. Hello, Student

Solution

1. Step 1: Understand class inheritance and constructor call

   The Student class extends Person and calls super(name) in its constructor, so the name property is set correctly.

2. Step 2: Check method call and output

   Calling s.greet() uses the inherited method, which returns Hello, Anna.

3. Final Answer:

   Hello, Anna -> Option B

4. Quick Check:

   super() sets parent properties correctly [OK]

Hint: Always call super() in child constructor to set parent properties [OK]

Common Mistakes:

• Forgetting to call super() causes errors
• Expecting child's own greet method without override
• Assuming name is undefined without super()

4. Identify the error in this TypeScript code:

class Vehicle {
  wheels: number;
  constructor(wheels: number) {
    this.wheels = wheels;
  }
}

class Car extends Vehicle {
  constructor() {
    this.wheels = 4;
  }
}

medium

A. Missing call to super() in Car constructor

B. Cannot assign number to wheels property

C. Class Car should not extend Vehicle

D. Constructor syntax is incorrect

Solution

1. Step 1: Check constructor in subclass

   The Car class constructor assigns this.wheels = 4 but does not call super(), which is required before using this.

2. Step 2: Understand TypeScript rules for subclass constructors

   In TypeScript, a subclass constructor must call super() before accessing this. Missing this causes a compile error.

3. Final Answer:

   Missing call to super() in Car constructor -> Option A

4. Quick Check:

   Always call super() before this in subclass constructor [OK]

Hint: Call super() first in subclass constructor before using this [OK]

Common Mistakes:

• Assigning to this before super() call
• Forgetting super() call causes runtime error
• Thinking super() is optional in subclass constructor

5. Given these classes, how can you extend Employee to add a department property and keep the name property from Person?

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Employee extends Person {
  // Add department property here
}

hard

A. class Employee extends Person {
department: string;
constructor(name: string, department: string) {
this.department = department;
}
}

B. class Employee extends Person {
department: string;
constructor(department: string) {
this.department = department;
}
}

C. class Employee extends Person {
department: string;
constructor(name: string) {
super(name);
}
}

D. class Employee extends Person {
department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
}

Solution

1. Step 1: Add department property and constructor parameters

   To add department, declare it and add it as a parameter in the constructor along with name.

2. Step 2: Call super(name) and assign department

   Call super(name) to set the inherited name property, then assign this.department = department.

3. Final Answer:

   class Employee extends Person { department: string; constructor(name: string, department: string) { super(name); this.department = department; } } -> Option D

4. Quick Check:

   Use super() for parent props and assign new props in constructor [OK]

Hint: Call super(name) then assign new properties in constructor [OK]

Common Mistakes:

• Not calling super() in constructor
• Missing department parameter in constructor
• Assigning this.department before super() call