Abstract methods in Typescript - Deep Dive

Overview - Abstract methods

What is it?

Abstract methods are special functions declared in a class without a body. They act as a promise that any class inheriting from this class will provide its own version of these methods. You cannot create an object directly from a class with abstract methods. Instead, you use subclasses that fill in the missing details.

Why it matters

Abstract methods help organize code by forcing certain behaviors in all subclasses, making sure important functions are always implemented. Without abstract methods, developers might forget to add key features in child classes, leading to bugs or inconsistent behavior. They make large programs easier to manage and understand by setting clear rules.

Where it fits

Before learning abstract methods, you should understand classes, inheritance, and methods in TypeScript. After mastering abstract methods, you can explore interfaces, polymorphism, and design patterns that rely on abstract classes.

Mental Model

Core Idea

An abstract method is a method declared without a body that subclasses must implement to fulfill a contract set by the parent class.

Think of it like...

Think of an abstract method like a recipe title in a cookbook without the instructions. The cookbook says 'Make a cake,' but leaves it to each baker to decide how exactly to bake it. Each baker (subclass) must provide their own detailed recipe (method body).

Abstract Class
┌─────────────────────┐
│  AbstractClass      │
│  ┌───────────────┐  │
│  │ abstract foo()│  │  <-- No body here
│  └───────────────┘  │
└─────────┬───────────┘
          │
          ▼
Subclass
┌─────────────────────┐
│  ConcreteClass      │
│  ┌───────────────┐  │
│  │ foo() { ... } │  │  <-- Must implement
│  └───────────────┘  │
└─────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding classes and methods

Concept: Learn what classes and methods are in TypeScript.

A class is like a blueprint for creating objects. Methods are functions inside classes that describe what the objects can do. For example: class Animal { speak() { console.log('Animal speaks'); } } const pet = new Animal(); pet.speak(); // prints 'Animal speaks'

Result

You can create objects and call their methods to perform actions.

Knowing how classes and methods work is essential because abstract methods build on these concepts by changing how methods are defined and used.

2

Foundation

Basics of inheritance in TypeScript

Concept: Learn how one class can inherit from another to reuse code.

Inheritance lets a class get features from another class. The child class can use or change the parent's methods. class Animal { speak() { console.log('Animal speaks'); } } class Dog extends Animal { speak() { console.log('Dog barks'); } } const pet = new Dog(); pet.speak(); // prints 'Dog barks'

Result

Child classes can customize or add new behaviors while keeping the parent's structure.

Understanding inheritance is key because abstract methods require subclasses to provide their own method versions.

3

Intermediate

Declaring abstract methods in abstract classes

🤔Before reading on: do you think you can create an object from a class with abstract methods? Commit to yes or no.

Concept: Abstract methods are declared inside abstract classes without a body, forcing subclasses to implement them.

In TypeScript, you declare an abstract class with the keyword 'abstract'. Inside it, you can declare abstract methods without any code: abstract class Animal { abstract speak(): void; } You cannot create an object from Animal directly: const pet = new Animal(); // Error! Subclasses must implement 'speak': class Dog extends Animal { speak() { console.log('Dog barks'); } } const pet = new Dog(); pet.speak(); // prints 'Dog barks'

Result

Abstract classes set a rule that subclasses must provide method bodies for abstract methods.

Knowing that abstract methods have no body and require subclasses to implement them helps enforce consistent behavior across different subclasses.

4

Intermediate

Using abstract methods to enforce contracts

🤔Before reading on: do you think abstract methods can have code inside them? Commit to yes or no.

Concept: Abstract methods define a contract that subclasses must follow, ensuring certain methods exist but without providing code.

Abstract methods only declare the method signature (name, parameters, return type) but no implementation. This means: - The parent class says 'You must have this method.' - The child class decides how it works. Example: abstract class Shape { abstract area(): number; } class Circle extends Shape { constructor(public radius: number) { super(); } area() { return Math.PI * this.radius * this.radius; } } const c = new Circle(5); console.log(c.area()); // prints area of circle

Result

Subclasses must provide their own code for abstract methods, ensuring they follow the parent's rules.

Understanding abstract methods as contracts helps you design flexible and safe code where subclasses cannot forget important methods.

5

Advanced

Abstract methods with access modifiers

🤔Before reading on: can abstract methods be private or protected? Commit to yes or no.

Concept: Abstract methods can have access modifiers like protected or public, controlling visibility in subclasses and outside code.

You can declare abstract methods as public (default) or protected. For example: abstract class Base { protected abstract doWork(): void; } class Derived extends Base { protected doWork() { console.log('Working'); } } This means only subclasses or the class itself can call 'doWork', not outside code. Note: private abstract methods are not allowed because subclasses must implement them.

Result

Access modifiers on abstract methods control who can call these methods, adding encapsulation.

Knowing how access modifiers work with abstract methods helps design secure and well-structured class hierarchies.

6

Advanced

Abstract methods vs interfaces

🤔Before reading on: do you think abstract methods and interfaces serve the same purpose? Commit to yes or no.

Concept: Abstract methods in abstract classes and interfaces both define method contracts, but abstract classes can have code and state, interfaces cannot.

Interfaces only declare method signatures and properties without any implementation or state: interface IShape { area(): number; } Abstract classes can have abstract methods plus implemented methods and fields: abstract class Shape { abstract area(): number; describe() { console.log('This is a shape'); } } Use abstract classes when you want shared code and state; use interfaces when you only want to define a contract.

Result

You understand when to use abstract classes with abstract methods versus interfaces.

Knowing the difference helps you choose the right tool for code reuse and design clarity.

7

Expert

Abstract methods in complex inheritance chains

🤔Before reading on: do you think a subclass can skip implementing an abstract method if its parent already implemented it? Commit to yes or no.

Concept: In multi-level inheritance, once an abstract method is implemented in any ancestor, subclasses do not have to implement it again unless they want to override it.

Consider: abstract class A { abstract foo(): void; } abstract class B extends A { foo() { console.log('Implemented in B'); } } class C extends B { // no need to implement foo() } const c = new C(); c.foo(); // prints 'Implemented in B' This means abstract methods enforce implementation only once in the chain, not repeatedly.

Result

You can design flexible class hierarchies where abstract methods are implemented at different levels.

Understanding this prevents redundant code and clarifies how abstract methods behave in deep inheritance.

Under the Hood

At runtime, TypeScript's abstract methods do not exist as separate entities because TypeScript compiles to JavaScript, which lacks abstract classes. The compiler enforces that abstract methods are implemented by subclasses during development. This is a static check, not a runtime feature. When compiled, abstract classes become normal classes, and abstract methods become regular methods implemented in subclasses.

Why designed this way?

TypeScript was designed to add type safety and structure on top of JavaScript without changing its runtime. Abstract methods provide a way to enforce design contracts during development, catching errors early. Since JavaScript does not support abstract methods natively, TypeScript uses compile-time checks instead of runtime enforcement.

TypeScript Source
┌─────────────────────────────┐
│ abstract class Animal {      │
│   abstract speak(): void;   │
│ }                           │
└─────────────┬───────────────┘
              │
Compiler checks implementation
              │
Compiled JavaScript
┌─────────────────────────────┐
│ class Animal {              │
│   // no speak method here   │
│ }                          │
└─────────────┬───────────────┘
              │
Subclasses implement speak()
              │
Runtime executes subclass methods normally

Myth Busters - 4 Common Misconceptions

Quick: Can you create an instance of a class with abstract methods? Commit to yes or no.

Common Belief: You can create objects directly from classes that have abstract methods.

Reality: You cannot create instances of abstract classes with abstract methods; they are incomplete blueprints.

Why it matters: Trying to instantiate abstract classes causes errors and confusion, breaking program flow.

Quick: Do abstract methods have code inside their bodies? Commit to yes or no.

Common Belief: Abstract methods can have code inside their bodies like normal methods.

Reality: Abstract methods have no body; they only declare the method signature.

Why it matters: Misunderstanding this leads to incorrect code and compiler errors.

Quick: Can private abstract methods be declared? Commit to yes or no.

Common Belief: You can declare abstract methods as private to hide them from subclasses.

Reality: Private abstract methods are not allowed because subclasses must implement abstract methods.

Why it matters: Trying to make abstract methods private breaks the contract system and causes compiler errors.

Quick: Does implementing an abstract method in a subclass mean all subclasses must implement it again? Commit to yes or no.

Common Belief: Every subclass must implement all abstract methods, even if a parent already did.

Reality: Once an abstract method is implemented in any ancestor, subclasses inherit that implementation and don't have to reimplement it unless they want to override.

Why it matters: This misconception leads to redundant code and confusion about inheritance.

Expert Zone

1

Abstract methods can be combined with concrete methods in the same abstract class, allowing partial implementation and forcing only some methods to be defined by subclasses.

2

TypeScript's abstract methods are purely a compile-time feature; understanding this helps avoid expecting runtime errors or behaviors related to abstraction.

3

Using abstract methods with generics allows creating flexible and reusable class hierarchies that adapt to different data types while enforcing method contracts.

When NOT to use

Avoid abstract methods when you only need to define a contract without any shared code or state; use interfaces instead. Also, if your class hierarchy is shallow or simple, abstract methods might add unnecessary complexity.

Production Patterns

In large codebases, abstract methods enforce consistent APIs across different modules, such as defining a base 'Service' class with abstract 'execute' methods implemented differently per service. They also enable plugin architectures where plugins must implement specific abstract methods.

Connections

Interfaces

Abstract methods and interfaces both define method contracts but differ in allowing shared code and state.

Knowing abstract methods clarifies when to use abstract classes versus interfaces for code reuse and design.

Polymorphism

Abstract methods enable polymorphism by ensuring subclasses implement methods that can be called through a common parent type.

Understanding abstract methods helps grasp how different objects can be treated uniformly while behaving differently.

Legal contracts

Abstract methods act like clauses in a legal contract that must be fulfilled by all parties (subclasses).

Seeing abstract methods as contracts helps appreciate their role in enforcing rules and responsibilities in code.

Common Pitfalls

#1 Trying to instantiate an abstract class directly.

Wrong approach:

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

const pet = new Animal(); // Error: Cannot create an instance of an abstract class

Correct approach:

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

class Dog extends Animal {
speak() {
console.log('Dog barks');
}
}

const pet = new Dog(); // Works fine
pet.speak();

Root cause:

Misunderstanding that abstract classes are incomplete and meant only to be extended.

#2 Providing a body for an abstract method.

Wrong approach:

abstract class Animal {
abstract speak() {
console.log('Hello');
}
} // Error: Abstract methods cannot have an implementation

Correct approach:

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

Root cause:

Confusing abstract methods with normal methods; abstract methods only declare signatures.

#3 Declaring private abstract methods.

Wrong approach:

abstract class Animal {
private abstract speak(): void;
} // Error: Abstract methods cannot be private

Correct approach:

abstract class Animal {
protected abstract speak(): void;
}

Root cause:

Not realizing subclasses must implement abstract methods, so they cannot be private.

Key Takeaways

Abstract methods declare method signatures without bodies, forcing subclasses to provide implementations.

You cannot create instances of classes with abstract methods; they serve as incomplete blueprints.

Abstract methods enforce consistent behavior across subclasses, acting like contracts in your code.

TypeScript enforces abstract methods at compile time, helping catch errors early without runtime overhead.

Understanding abstract methods helps design flexible, maintainable, and safe class hierarchies.

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