TypeScript Inheritance and Abstract Classes Step by step Implementation and Top 10 Questions and Answers
 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    Last Update: April 01, 2025      18 mins read      Difficulty-Level: beginner

TypeScript Inheritance and Abstract Classes

TypeScript, a statically typed superset of JavaScript, offers several features that facilitate object-oriented programming (OOP), including inheritance and abstract classes. These features allow developers to create more organized, maintainable, and scalable codebases. In this detailed explanation, we will explore TypeScript's inheritance model and abstract classes, including their importance and practical implementations.

1. Introduction to Inheritance

Inheritance is one of the fundamental concepts of OOP. It allows a class (known as a derived class or child class) to inherit properties and methods from another class (known as a base class or parent class). This mechanism promotes code reusability, simplifies maintenance, and helps in establishing a clear class hierarchy. In TypeScript, inheritance is achieved using the extends keyword.

Example: Basic Inheritance

class Animal {
    public name: string;

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

    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) {
        super(name);  // Call the constructor of the base class
    }

    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) {
        super(name);
    }

    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

Explanation:

  • Base Class (Animal): Contains a name property and a move method. The move method has a default parameter that can be overridden by derived classes.
  • Derived Classes (Snake & Horse): Both classes extend the Animal class, inheriting its properties and methods. They override the move method to provide specific behavior, but they also call the base class's move method using super.move().
  • Creating Instances: Instances of Snake and Horse are created and assigned to variables. Even though tom is of type Animal, it is instantiated with a Horse object, demonstrating polymorphism.

2. Key Concepts in Inheritance

  • Super Keyword: Used to call functions defined on the base class.
  • Overriding Methods: Derived classes can override methods of the base class to provide specific implementations.
  • Protected Members: Using the protected keyword allows members to be accessible within the class and its subclasses, but not from outside the class hierarchy.

Example: Protected Members

class Person {
    protected name: string;

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

class Employee extends Person {
    private department: string;

    constructor(name: string, department: string) {
        super(name);
        this.department = department;
    }

    public getEmployeeInfo() {
        return `${this.name} works in the ${this.department}.`;
    }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getEmployeeInfo());
// console.log(howard.name); // Error: Property 'name' is protected and only accessible within class 'Person' and its subclasses.

3. Abstract Classes

Abstract classes are base classes from which other classes may be derived. They cannot be instantiated directly. Abstract classes are often used to define a template for other classes, specifying which methods must be implemented by derived classes. This enforces a contract among different classes in a hierarchy, ensuring they provide essential functionality.

Declaring an Abstract Class

abstract class Department {
    constructor(public name: string) {}

    printName(): void {
        console.log(`Department name: ${this.name}`);
    }

    // Abstract method must be implemented by derived classes
    abstract printMeeting(): void;
}

Example: Implementing Abstract Classes

class AccountingDepartment extends Department {
    constructor() {
        super("Accounting and Auditing"); // Base class constructor
    }

    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10am.");
    }

    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

let department: Department; // OK to create a reference to an abstract type
// department = new Department(); // Error: Cannot create an instance of an abstract class.
department = new AccountingDepartment(); // OK to create and assign a non-abstract subclass
department.printName();
department.printMeeting();
// department.generateReports(); // Error: Property 'generateReports' does not exist on type 'Department'.

Explanation:

  • Abstract Class (Department): Contains a concrete method printName and an abstract method printMeeting.
  • Derived Class (AccountingDepartment): Implements the abstract method printMeeting.
  • Instantiation: An instance of AccountingDepartment is created and assigned to a variable of type Department. Direct instantiation of the abstract class is not allowed.

Benefits of Abstract Classes:

  • Template for Derived Classes: Abstract classes provide a template that defines how derived classes should be structured.
  • Ensures Certain Methods are Implemented: Abstract methods enforce a contract that derived classes must follow.
  • Code Reusability: Common functionality can be defined in the abstract class, reducing duplication.

4. Importance and Use Cases

Use Cases:

  • Frameworks: Abstract classes are commonly used in frameworks to define a common interface that must be implemented by derived classes.
  • Libraries: When developing libraries, abstract classes can help enforce specific patterns and methodologies.
  • Game Development: In games, different characters or objects might share common properties but have different behaviors, leading to the use of abstract classes.

Importance:

  • Maintainability: Using inheritance and abstract classes helps in maintaining large codebases by organizing code into a coherent structure.
  • Scalability: Facilitates the addition of new classes with minimal changes to existing code.
  • Readability: Makes the code more readable and understandable by clearly defining the relationships between classes.

5. Conclusion

TypeScript's support for inheritance and abstract classes provides powerful tools for organizing and reusing code. By leveraging these features, developers can create more maintainable, scalable, and robust applications. Understanding how to effectively use these tools is essential for mastering TypeScript and building high-quality applications.

By incorporating inheritance and abstract classes, developers can design cleaner, more efficient codebases that adhere to object-oriented principles. This not only helps in creating maintainable and scalable systems but also makes it easier for other developers to understand and contribute to the code.




TypeScript Inheritance and Abstract Classes: Step-by-Step Guide with Examples

Understanding TypeScript Inheritance

Inheritance in TypeScript allows you to create a new class (derived or child class) that extends another class (base or parent class). This new class inherits the properties and methods of the parent class, promoting code reusability and a more organized structure.

Understanding TypeScript Abstract Classes

Abstract classes in TypeScript are base classes from which other classes may be derived. They cannot be instantiated directly. They may contain implementations for some methods, but other methods must be implemented by derived classes.

Step-by-Step Guide

Step 1: Set up the Environment

Before starting with TypeScript inheritance and abstract classes, ensure your development environment is set up:

  1. Install Node.js: This will install npm (Node Package Manager).

  2. Install TypeScript:

    • Open your terminal or command prompt.
    • Run: npm install -g typescript

  3. Install TypeScript Definition Manager (Typings) (optional but useful):

    • Run: npm install -g typings

Step 2: Create a Sample Project

  1. Create a Project Directory:

    • Open Terminal and run: mkdir ts-inheritance
    • Navigate into the directory: cd ts-inheritance

  2. Initialize a Node.js Project:

    • Run: npm init -y

  3. Create a TypeScript Configuration File:

    • Run: tsc --init
    • This generates a tsconfig.json file which configures TypeScript settings.

Step 3: Define an Abstract Class

Create an abstract class named Vehicle which will act as a blueprint for other classes.

  1. Create a File Named vehicle.ts: 
    // vehicle.ts

export abstract class Vehicle {
  constructor(public make: string, public model: string) {}

  // Abstract method to be implemented by derived classes
  abstract displayInfo(): void;

  // Concrete method
  startEngine(): void {
    console.log("Engine started");
  }
}

Step 4: Define Derived Classes

Create derived classes Car and Truck that inherit from the Vehicle abstract class.

  1. Create a File Named car.ts:

    // car.ts

import { Vehicle } from "./vehicle";

export class Car extends Vehicle {
  constructor(make: string, model: string, public numDoors: number) {
    super(make, model);
  }

  // Implementing the abstract method
  displayInfo(): void {
    console.log(`Car: ${this.make} ${this.model}, Doors: ${this.numDoors}`);
  }
}

  2. Create a File Named truck.ts:

    // truck.ts

import { Vehicle } from "./vehicle";

export class Truck extends Vehicle {
  constructor(make: string, model: string, public loadCapacity: number) {
    super(make, model);
  }

  // Implementing the abstract method
  displayInfo(): void {
    console.log(`Truck: ${this.make} ${this.model}, Load Capacity: ${this.loadCapacity} tons`);
  }
}

Step 5: Create the Main Application File

In this file, instantiate the derived classes and run some operations.

  1. Create a File Named main.ts: 
    // main.ts

import { Car } from "./car";
import { Truck } from "./truck";

const myCar = new Car("Toyota", "Corolla", 4);
const myTruck = new Truck("Ford", "F-150", 5);

myCar.startEngine();
myCar.displayInfo();

myTruck.startEngine();
myTruck.displayInfo();

Step 6: Compile and Run the Application

  1. Compile TypeScript Files:

    • Run: tsc in the root of your project directory. This command will generate .js files in the dist directory if configured in tsconfig.json.

  2. Run the Compiled JavaScript Files:

    • Run the main.js file using Node.js: node dist/main.js (Adjust the path to main.js if necessary).

Step 7: Data Flow

When you run the main.js file, here's what happens:

  1. Instances Creation: The Car and Truck objects myCar and myTruck are created.
  2. Method Calls:
    • myCar.startEngine() calls the startEngine method in the Vehicle class.
    • myCar.displayInfo() calls the displayInfo method in the Car class which was overridden from Vehicle.
    • myTruck.startEngine() also calls the startEngine method in the Vehicle class.
    • myTruck.displayInfo() calls the displayInfo method in the Truck class.

Output:

Engine started
Car: Toyota Corolla, Doors: 4
Engine started
Truck: Ford F-150, Load Capacity: 5 tons

This illustrates basic TypeScript inheritance and abstract classes in action, helping you understand how to structure your code for reusability and organization.




Top 10 Questions and Answers on TypeScript Inheritance and Abstract Classes

1. What is inheritance in TypeScript, and how does it work?

Answer: Inheritance in TypeScript is a concept derived from object-oriented programming (OOP) where a class can inherit properties and methods from another class. The class that is being inherited from is called the base class or parent class, while the class that inherits is known as the derived class or child class. This allows for code reusability and hierarchical classifications.

Example:

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

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

const dog = new Dog();
dog.move(10);
dog.bark();

In this example, Dog inherits the move method from the Animal class and adds its own bark method.

2. What is the purpose of the super keyword in TypeScript?

Answer: The super keyword in TypeScript is used to call the constructor and methods of the parent class. It is essential when you are working with classes that inherit from other classes.

  • To call the parent class constructor, use super() within the derived class constructor.
  • To call a method from the parent class, use super.methodName().

Example:

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

class Employee extends Person {
    department: string;

    constructor(name: string, department: string) {
        super(name); // Call the base class constructor with the name parameter
        this.department = department;
    }

    getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch()); // Output: "Hello, my name is Howard and I work in Sales."

3. How do you implement an abstract class in TypeScript?

Answer: Abstract classes in TypeScript serve as a base class from which other classes may be derived. They can contain both implementation details and method declarations without implementation (abstract methods). Abstract classes cannot be instantiated directly.

Example:

abstract class Department {
    constructor(public name: string) {}

    printName(): void {
        console.log("Department name: " + this.name);
    }

    abstract printMeeting(): void; // must be implemented in derived classes
}

class AccountingDepartment extends Department {
    constructor() {
        super("Accounting and Auditing"); // constructors in derived classes must call super()
    }

    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10am.");
    }

    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

let department: Department; // ok to create reference to an abstract type
department = new Department(); // error: cannot create an instance of an abstract class
department = new AccountingDepartment(); // ok to create and assign a non-abstract subclass
department.printName();
department.printMeeting();
// department.generateReports(); // error: method doesn't exist on declared abstract type

4. Can a class inherit from multiple classes in TypeScript?

Answer: No, TypeScript does not support multiple class inheritance. Each class can only have one direct superclass. However, TypeScript does support mixins, which can provide a form of composition to achieve similar results.

5. What are the differences between interfaces and abstract classes in TypeScript?

Answer: While both interfaces and abstract classes in TypeScript define a contract that implementing classes must adhere to, there are significant differences:

  • Interfaces:

    • Cannot contain method implementations.
    • Cannot contain property implementations.
    • Cannot be instantiated.
    • Cannot extend multiple interfaces (though you can achieve similar functionality via intersection types or multiple interfaces).

  • Abstract Classes:

    • Can contain both method implementations and abstract methods.
    • Can contain property implementations.
    • Cannot be instantiated but can be extended by subclasses.
    • Can extend a single other class and implement multiple interfaces.

Example:

interface IPrintable {
    print(): void;
}

abstract class Document {
    protected title: string;
    
    constructor(title: string) {
        this.title = title;
    }

    abstract makeCopy(): Document;

    getTitle(): string {
        return this.title;
    }
}

class Report extends Document implements IPrintable {
    constructor(title: string) {
        super(title);
    }

    print(): void {
        console.log('Printing report:', this.getTitle());
    }

    makeCopy(): Report {
        return new Report(this.title);
    }
}

6. How do you access overridden methods in TypeScript?

Answer: When a method is overridden in a derived class, the super keyword can be used to invoke the method from the parent class.

Example:

class Parent {
    greet() {
        console.log("Hello from Parent!");
    }
}

class Child extends Parent {
    greet() {
        super.greet(); // invokes Parent's greet() method
        console.log("Hello from Child!");
    }
}

let childInstance = new Child();
childInstance.greet();
// Output: 
// Hello from Parent!
// Hello from Child!

7. What is method overloading in TypeScript, and is it supported?

Answer: Method overloading allows a class to have more than one method with the same name but different parameter lists. It provides flexibility in calling methods based on the number or types of parameters passed. However, TypeScript's type-checking system does not allow defining overloaded methods in the typical sense like C# or Java.

Instead, developers provide multiple function signatures followed by a single implementation using union types or optional/parameter properties.

Example:

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    if (typeof a === "number" && typeof b === "number") {
        return a + b;
    } else if (typeof a === "string" && typeof b === "string") {
        return a.concat(b);
    }
}

console.log(add(10, 20)); // Output: 30
console.log(add("Hello", " World")); // Output: Hello World

8. When should you use abstract classes vs interfaces in TypeScript?

Answer: Choosing between abstract classes and interfaces in TypeScript depends on your design goals:

  • Use Abstract Classes When:

    • You want to share code among several closely related classes.
    • You expect classes that extend your abstract class to have many common methods or fields.
    • You want to declare non-static fields with default values.
    • You want to include implementation details in addition to the interface declaration.

  • Use Interfaces When:

    • You want to separate your implementation into logical groupings and not worry too much about complex hierarchies.
    • You want your classes to inherit behavior from a variety of unrelated sources.
    • You want to specify a structure without providing implementation.
    • You want to avoid problems associated with multiple inheritance (diamond problem).

9. Can a class implement multiple interfaces in TypeScript?

Answer: Yes, a class in TypeScript can implement multiple interfaces by separating them with commas.

Example:

interface Printer {
    print(doc: Document): void;
}

interface Scanner {
    scan(doc: Document): void;
}

class MultiFunctionalDevice implements Printer, Scanner {
    print(doc: Document): void {
        console.log("Printing document:", doc);
    }

    scan(doc: Document): void {
        console.log("Scanning document:", doc);
    }
}

10. How do you modify a property from the base class in a derived class in TypeScript?

Answer: To modify a property from the base class in a derived class, you need to first ensure that the property is accessible. If the property is protected or public, you can modify it directly in the derived class by assigning a new value.

Example:

class Vehicle {
    protected speed: number;

    constructor(speed: number) {
        this.speed = speed;
    }

    getSpeed(): number {
        return this.speed;
    }
}

class Car extends Vehicle {
    accelerate(increase: number) {
        this.speed += increase; // Modifying the inherited 'speed' property
    }
}

let myCar = new Car(50);
console.log("Initial Speed:", myCar.getSpeed()); // Output: Initial Speed: 50
myCar.accelerate(20);
console.log("Increased Speed:", myCar.getSpeed()); // Output: Increased Speed: 70

Understanding these concepts is crucial for leveraging the full power of TypeScript, particularly when working with complex object relationships and behaviors.