Abstract classes in Typescript - Step-by-Step Execution

Concept Flow - Abstract classes

Define abstract class with abstract methods

↓

Create subclass that extends abstract class

↓

Implement all abstract methods in subclass

↓

Create instance of subclass

↓

Call implemented methods on instance

↓

Program runs using subclass behavior

Abstract classes define methods without implementation. Subclasses must implement these methods before creating instances.

Execution Sample

Typescript

abstract class Animal {
  abstract makeSound(): void;
  move(): void {
    console.log('Moving...');
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log('Bark');
  }
}

const dog = new Dog();
dog.makeSound();
dog.move();

Defines an abstract class Animal with an abstract method. Dog subclass implements the method and instances can be created.

Execution Table

Step	Action	Evaluation	Result
1	Define abstract class Animal with abstract method makeSound and concrete method move	Class Animal created	No instance can be made of Animal
2	Define class Dog extending Animal	Dog must implement makeSound	Dog class created
3	Implement makeSound in Dog	Dog.makeSound() logs 'Bark'	Method implemented
4	Create instance dog of Dog	dog is instance of Dog	dog created
5	Call dog.makeSound()	Calls Dog's makeSound	Output: Bark
6	Call dog.move()	Calls Animal's move	Output: Moving...
7	Try to create instance of Animal	Error: Cannot instantiate abstract class	Instantiation fails

💡 Abstract class Animal cannot be instantiated directly; subclass Dog implements abstract methods allowing instantiation.

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 6	Final
dog	undefined	Dog instance created	dog.makeSound() called	dog.move() called	dog instance exists

Key Moments - 3 Insights

Why can't we create an instance of the abstract class Animal?

Because Animal has an abstract method without implementation, TypeScript prevents creating instances until all abstract methods are implemented, as shown in step 7 of the execution_table.

What happens if Dog does not implement the abstract method makeSound?

TypeScript will give an error and Dog cannot be instantiated. This is implied in step 2 and 3 where Dog must implement makeSound before instances can be created.

Can the subclass Dog use concrete methods from Animal?

Yes, Dog inherits concrete methods like move from Animal, as shown in step 6 where dog.move() calls Animal's method.

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 7?

A Error because Animal is abstract and cannot be instantiated

B An instance of Animal is created successfully

C Dog instance is created

D makeSound method is called

💡 Hint

Check the 'Action' and 'Result' columns at step 7 in execution_table

At which step is the dog instance created?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for 'Create instance dog of Dog' in the execution_table

If Dog did not implement makeSound, what would happen?

A Dog could still be instantiated

B makeSound would default to Animal's implementation

C TypeScript would give an error preventing instantiation

D dog.move() would fail

💡 Hint

Refer to key_moments about subclass implementation requirements

Concept Snapshot

abstract class ClassName {
  abstract methodName(): returnType; // no body
  concreteMethod() { ... } // optional
}

class Subclass extends ClassName {
  methodName() { ... } // must implement all abstract methods
}

Cannot create instances of abstract classes directly.
Subclasses must implement all abstract methods before instantiation.

Full Transcript

An abstract class in TypeScript is a class that cannot be instantiated directly because it contains one or more abstract methods without implementation. These abstract methods act like placeholders that subclasses must implement. In the example, Animal is an abstract class with an abstract method makeSound and a concrete method move. The Dog class extends Animal and implements makeSound. Only after implementing all abstract methods can we create an instance of Dog. Calling dog.makeSound() outputs 'Bark' and dog.move() outputs 'Moving...'. Trying to create an instance of Animal directly causes an error. This ensures that abstract classes define a contract for subclasses to follow.

Practice

1. What is true about an abstract class in TypeScript?

easy

A. Abstract classes are the same as interfaces.

B. Abstract classes cannot have any methods implemented.

C. You cannot create an instance of an abstract class directly.

D. You must use the new keyword to instantiate an abstract class.

Solution

1. Step 1: Understand abstract class instantiation rules

   Abstract classes cannot be instantiated directly, so you cannot create objects from them using new.

2. Step 2: Compare other options

   Abstract classes can have implemented methods, are different from interfaces, and cannot be instantiated with new.

3. Final Answer:

   You cannot create an instance of an abstract class directly. -> Option C

4. Quick Check:

   Abstract class instantiation = not allowed [OK]

Hint: Remember: abstract classes can't be directly instantiated [OK]

Common Mistakes:

• Thinking abstract classes are interfaces
• Assuming abstract classes can't have implemented methods
• Trying to instantiate abstract classes directly

2. Which of the following is the correct syntax to declare an abstract class in TypeScript?

easy

A. abstract class Vehicle {}

B. class abstract Vehicle {}

C. abstract Vehicle class {}

D. class Vehicle abstract {}

Solution

1. Step 1: Recall TypeScript abstract class syntax

   The correct syntax places the keyword abstract before class, followed by the class name.

2. Step 2: Check each option

   Only abstract class Vehicle {} correctly uses abstract class Vehicle {}. Others have incorrect keyword order.

3. Final Answer:

   abstract class Vehicle {} -> Option A

4. Quick Check:

   Abstract class syntax = abstract class Name {} [OK]

Hint: Put 'abstract' before 'class' keyword [OK]

Common Mistakes:

• Placing 'abstract' after 'class'
• Mixing keyword order
• Omitting 'abstract' keyword

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

abstract class Animal {
  abstract makeSound(): void;
  move(): void {
    console.log('Moving');
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log('Bark');
  }
}

const dog = new Dog();
dog.makeSound();
dog.move();

medium

A. Moving\nBark

B. No output

C. Error: Cannot create instance of abstract class

D. Bark\nMoving

Solution

1. Step 1: Understand class inheritance and method calls

   The class Dog extends Animal and implements makeSound(). Calling dog.makeSound() prints 'Bark'.

2. Step 2: Check the move() method call

   The move() method is implemented in Animal and prints 'Moving'. Calling dog.move() prints 'Moving'.

3. Final Answer:

   Bark Moving -> Option D

4. Quick Check:

   Subclass methods run, abstract class methods inherited [OK]

Hint: Abstract methods must be implemented; inherited methods run normally [OK]

Common Mistakes:

• Thinking abstract class instance is created
• Confusing method call order
• Expecting errors on calling inherited methods

4. Identify the error in the following TypeScript code:

abstract class Shape {
  abstract area(): number;
}

class Circle extends Shape {
  radius: number;
  constructor(radius: number) {
    super();
    this.radius = radius;
  }
}

medium

A. Circle must implement the abstract method area()

B. Abstract class cannot have abstract methods

C. radius property should be private

D. Missing call to super() in Circle constructor

Solution

1. Step 1: Check abstract method implementation

   The abstract class Shape declares an abstract method area(). Any subclass must implement this method.

2. Step 2: Verify Circle class methods

   The Circle class does not implement area(), so this causes a compile-time error.

3. Final Answer:

   Circle must implement the abstract method area() -> Option A

4. Quick Check:

   Abstract methods require subclass implementation [OK]

Hint: All abstract methods must be implemented in subclasses [OK]

Common Mistakes:

• Forgetting to implement abstract methods
• Thinking super() call is not mandatory when base has no constructor
• Confusing abstract methods with optional methods

5. Given the abstract class below, which implementation correctly uses it to calculate the area of a rectangle?

abstract class Shape {
  abstract area(): number;
}

// Choose the correct Rectangle class implementation

hard

A. class Rectangle extends Shape {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
area(): number {
return this.width + this.height;
}
}

B. class Rectangle extends Shape {
width: number;
height: number;
constructor(width: number, height: number) {
super();
this.width = width;
this.height = height;
}
area(): number {
return this.width * this.height;
}
}

C. class Rectangle extends Shape {
width: number;
height: number;
constructor(width: number, height: number) {
super();
this.width = width;
this.height = height;
}
area(): number {
return this.width + this.height;
}
}

D. class Rectangle extends Shape {
width: number;
height: number;
constructor(width: number, height: number) {
super();
this.width = width;
this.height = height;
}
}

Solution

1. Step 1: Check constructor and super() call

   Since Shape has no constructor, calling super() is required before using this in the subclass constructor.

2. Step 2: Verify area() method correctness

   class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { super(); this.width = width; this.height = height; } area(): number { return this.width * this.height; } } correctly implements area() returning width * height, which is the rectangle's area.

3. Step 3: Check other options for errors

   class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { this.width = width; this.height = height; } area(): number { return this.width + this.height; } } return width + height, which is incorrect for area. class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { super(); this.width = width; this.height = height; } } lacks area() implementation, causing error.

4. Final Answer:

   class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { super(); this.width = width; this.height = height; } area(): number { return this.width * this.height; } } -> Option B

5. Quick Check:

   Correct area method and constructor = class Rectangle extends Shape { width: number; height: number; constructor(width: number, height: number) { super(); this.width = width; this.height = height; } area(): number { return this.width * this.height; } } [OK]

Hint: Area of rectangle = width * height; implement abstract method [OK]

Common Mistakes:

• Returning sum instead of product for area
• Omitting abstract method implementation
• Forgetting to assign constructor parameters