Abstract methods in Typescript - Step-by-Step Execution

Concept Flow - Abstract methods

Define abstract class

↓

Declare abstract method (no body)

↓

Create subclass

↓

Implement abstract method in subclass

↓

Instantiate subclass and call method

↓

Method runs with subclass implementation

Abstract methods are declared without a body in an abstract class and must be implemented in subclasses before use.

Execution Sample

Typescript

abstract class Animal {
  abstract makeSound(): void;
}

class Dog extends Animal {
  makeSound() { console.log('Woof!'); }
}

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

This code defines an abstract method makeSound in Animal, implements it in Dog, then calls it.

Execution Table

Step	Action	Evaluation	Result
1	Define abstract class Animal with abstract method makeSound	No method body	Animal cannot be instantiated
2	Define class Dog extending Animal	Dog must implement makeSound	Dog class created
3	Implement makeSound in Dog	Method prints 'Woof!'	Dog.makeSound ready
4	Create instance dog of Dog	dog is an object of Dog	dog created
5	Call dog.makeSound()	Runs Dog's makeSound	Output: Woof!
6	Try to instantiate Animal	Error: Cannot create instance of abstract class	Instantiation fails

💡 Execution stops after dog.makeSound() prints 'Woof!' and abstract class cannot be instantiated

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
Animal	abstract class defined	unchanged	unchanged	unchanged
Dog	class defined	unchanged	unchanged	unchanged
dog	undefined	instance of Dog	instance of Dog	instance of Dog

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 instantiation to ensure subclasses provide the method (see execution_table step 6).

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

TypeScript will give an error because Dog must implement all abstract methods from Animal (see execution_table step 2).

When dog.makeSound() is called, which method runs?

The implementation in Dog runs, printing 'Woof!' (see execution_table step 5).

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 6?

A An instance of Animal is created successfully

B Error because Animal is abstract and cannot be instantiated

C Dog's makeSound method is called

D Nothing happens

💡 Hint

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

At which step is the dog object created?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the step where 'Create instance dog of Dog' happens in execution_table

If Dog did not implement makeSound, what would happen?

A TypeScript would give a compile-time error

B Dog would compile but throw error at runtime

C Dog would be abstract too

D Nothing, code runs fine

💡 Hint

Refer to key_moments about implementation requirements and execution_table step 2

Concept Snapshot

abstract class ClassName {
  abstract methodName(): returnType;
}

- Abstract methods have no body.
- Subclasses must implement all abstract methods.
- Abstract classes cannot be instantiated directly.
- Calling abstract methods runs subclass implementation.

Full Transcript

Abstract methods in TypeScript are declared inside abstract classes without a method body. These methods must be implemented by any subclass. The abstract class itself cannot be instantiated. In the example, Animal is an abstract class with an abstract method makeSound. Dog extends Animal and implements makeSound by printing 'Woof!'. We create an instance of Dog and call makeSound, which outputs 'Woof!'. Trying to instantiate Animal directly causes an error. This ensures that abstract methods enforce a contract for subclasses to provide specific behavior.

Practice

1. What is true about abstract methods in TypeScript?

easy

A. They have no body and must be implemented by subclasses.

B. They can be called directly without implementation.

C. They can only be used in interfaces, not classes.

D. They are optional to implement in child classes.

Solution

1. Step 1: Understand abstract method definition

   Abstract methods declare a method signature without a body inside an abstract class.

2. Step 2: Check subclass requirements

   Child classes must provide an implementation for all abstract methods.

3. Final Answer:

   They have no body and must be implemented by subclasses. -> Option A

4. Quick Check:

   Abstract methods require implementation [OK]

Hint: Abstract methods have no body and force subclass implementation [OK]

Common Mistakes:

• Thinking abstract methods can be called directly
• Confusing abstract methods with interface methods
• Assuming abstract methods are optional to implement

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

easy

A. abstract myMethod() { }

B. abstract myMethod(): void;

C. myMethod(): void;

D. abstract function myMethod() {}

Solution

1. Step 1: Recall abstract method syntax

   Abstract methods are declared with the abstract keyword and no body, ending with a semicolon.

2. Step 2: Analyze options

   abstract myMethod(): void; matches the correct syntax. Syntaxes that incorrectly include a body are invalid. myMethod(): void; lacks the abstract keyword.

3. Final Answer:

   abstract myMethod(): void; -> Option B

4. Quick Check:

   Abstract method syntax = abstract myMethod(): void; [OK]

Hint: Abstract methods have no body and end with a semicolon [OK]

Common Mistakes:

• Adding method body to abstract methods
• Omitting the abstract keyword
• Using function keyword inside class

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

abstract class Animal {
  abstract makeSound(): string;
}

class Dog extends Animal {
  makeSound(): string {
    return "Woof!";
  }
}

const dog = new Dog();
console.log(dog.makeSound());

medium

A. "Woof!"

B. Error: Cannot instantiate abstract class

C. undefined

D. Error: makeSound method not implemented

Solution

1. Step 1: Understand class hierarchy

   Animal is abstract with an abstract method makeSound. Dog extends Animal and implements makeSound returning "Woof!".

2. Step 2: Check instantiation and method call

   Dog is instantiated (allowed), and calling makeSound() returns "Woof!".

3. Final Answer:

   "Woof!" -> Option A

4. Quick Check:

   Implemented abstract method returns "Woof!" [OK]

Hint: Abstract class can't instantiate, but subclass can [OK]

Common Mistakes:

• Trying to instantiate abstract class directly
• Forgetting to implement abstract method
• Expecting undefined instead of returned string

4. Identify the error in the following TypeScript code:

abstract class Vehicle {
  abstract startEngine(): void;
}

class Car extends Vehicle {
  startEngine() {
    console.log("Engine started");
  }
}

const myCar = new Vehicle();

medium

A. startEngine method must be static.

B. Missing return type in startEngine method.

C. Cannot instantiate abstract class Vehicle.

D. Car class must be abstract.

Solution

1. Step 1: Check instantiation of abstract class

   The code tries to create an instance of Vehicle, which is abstract and cannot be instantiated.

2. Step 2: Verify method implementation and class declarations

   The Car class correctly implements startEngine. The method return type is optional in implementation. No need for static method or abstract Car class.

3. Final Answer:

   Cannot instantiate abstract class Vehicle. -> Option C

4. Quick Check:

   Abstract classes cannot be instantiated [OK]

Hint: Abstract classes cannot be instantiated directly [OK]

Common Mistakes:

• Trying to create instance of abstract class
• Thinking method must be static
• Confusing missing return type as error

5. Given the abstract class below, which implementation correctly uses abstract methods to calculate area?

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

// Choose the correct subclass implementation:

hard

A. class Square extends Shape {
constructor(private side: number) { super(); }
area(): string { return `${this.side}`; }
}

B. class Square extends Shape {
constructor(private side: number) {}
area() { return side * side; }
}

C. class Square extends Shape {
area(): number { return 0; }
}

D. class Square extends Shape {
constructor(private side: number) { super(); }
area(): number { return this.side * this.side; }
}

Solution

1. Step 1: Check constructor and super call

   class Square extends Shape { constructor(private side: number) { super(); } area(): number { return this.side * this.side; } } correctly calls super() in constructor, required for subclass of abstract class.

2. Step 2: Verify method signature and implementation

   class Square extends Shape { constructor(private side: number) { super(); } area(): number { return this.side * this.side; } } implements area() returning a number, matching abstract method signature. Other implementations have errors: one misses super() and uses an undefined variable, one returns 0 ignoring side, one returns string instead of number.

3. Final Answer:

   class Square extends Shape { constructor(private side: number) { super(); } area(): number { return this.side * this.side; } } -> Option D

4. Quick Check:

   Correct subclass calls super and matches method signature [OK]

Hint: Subclass must call super() and match abstract method signature [OK]

Common Mistakes:

• Omitting super() call in constructor
• Mismatching return types in method
• Using undefined variables inside method