Typescript Inheritance And Abstract Classes Complete Guide

Example 1: Basic Inheritance

Inheritance allows a class to inherit properties and methods from another class. The class that inherits is called the derived or child class, and the class being inherited from is known as the base or parent class.

Step-by-Step Implementation

1. Define a Base Class: Create a Vehicle class that has common properties and methods for all types of vehicles.
2. Define a Derived Class: Create a Car class that extends the Vehicle class and adds its own specific features.

// Base Class: Vehicle
class Vehicle {
    protected make: string;
    protected model: string;
    protected year: number;

    constructor(make: string, model: string, year: number) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    getDetails() {
        return `${this.year} ${this.make} ${this.model}`;
    }

    startEngine() {
        console.log("Engine started");
    }

    stopEngine() {
        console.log("Engine stopped");
    }
}

// Derived Class: Car
class Car extends Vehicle {
    private numberOfDoors: number;

    constructor(make: string, model: string, year: number, numberOfDoors: number) {
        // Call the constructor of the base class
        super(make, model, year);
        this.numberOfDoors = numberOfDoors;
    }

    getCarDetails() {
        return `${this.getDetails()} with ${this.numberOfDoors} doors`;
    }
}

const myCar = new Car('Toyota', 'Camry', 2022, 4);
console.log(myCar.getCarDetails());   // Output: 2022 Toyota Camry with 4 doors
myCar.startEngine();                  // Output: Engine started
myCar.stopEngine();                   // Output: Engine stopped

Explanation:

• Vehicle Class: Serves as a base class with protected properties (make, model, year). These are accessible within the Vehicle class and any class that extends it.
• Constructor in Vehicle: Initializes the properties of a vehicle.
• Methods in Vehicle: Common functionalities like startEngine() and stopEngine().
• Car Class: Inherits from Vehicle using the extends keyword.
• super Keyword: Calls the constructor of the base class (Vehicle), passing necessary parameters.
• Car Specific Properties: Adds a numberOfDoors property specific to cars.
• getCarDetails Method: Utilizes the method from the base class (getDetails) to create a detailed description.

Example 2: Using Access Modifiers

Access modifiers in TypeScript (private, protected, public) control the visibility of class members.

Step-by-Step Implementation

1. Define a Base Class Animal: It should include private and protected properties.
2. Define a Derived Class Dog: It should extend Animal and add specific behaviors.

// Base Class: Animal
class Animal {
    private name: string;
    protected species: string;

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

    getName() {
        return this.name;
    }

    makeSound() {
        console.log(`${this.species} makes a sound`);
    }
}

// Derived Class: Dog
class Dog extends Animal {
    private breed: string;

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

    getBreed() {
        return this.breed;
    }

    makeSound() {
        super.makeSound();
        console.log(`Specifically, ${this.getName()} the ${this.breed} barks`);
    }
}

const myDog = new Dog('Buddy', 'Canine', 'Golden Retriever');
console.log(myDog.getBreed());         // Output: Golden Retriever
myDog.makeSound();                     // Output: Canine makes a sound
                                       //         Specifically, Buddy the Golden Retriever barks

Explanation:

• Private Property (name): This property is only accessible within the Animal class.
• Protected Property (species): This property can be accessed within the Animal class and any class that extends it (Dog).
• Public Methods (getName and makeSound): getName returns the name of the animal, while makeSound logs a generic message.
• Overriding Methods: The Dog class overrides the makeSound method to provide species-specific behavior, calling the superclass method using super.

Example 3: Abstract Classes

An abstract class cannot be instantiated on its own and must be inherited by other classes. Abstract classes often contain one or more abstract methods that do not have an implementation but must be implemented by derived classes.

Step-by-Step Implementation

1. Define an Abstract Class Shape:
   • Includes abstract properties that need to be defined by subclasses.
   • Includes an abstract method area that needs to be implemented.
2. Define a Concrete Class Circle:
   • Extends Shape and provides an implementation for the abstract properties and method.

// Abstract Class: Shape
abstract class Shape {
    protected width: number;
    protected height: number;

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }

    abstract area(): number;

    // Non-abstract method (optional)
    getDimensions(): { width: number, height: number } {
        return { width: this.width, height: this.height };
    }
}

// Concrete Class: Circle
class Circle extends Shape {
    // Override the width and height to represent the radius of the circle
    private radius: number;

    constructor(radius: number) {
        super(radius * 2, radius * 2); // width and height are diameter for a circle
        this.radius = radius;
    }

    // Implementing the abstract method
    area(): number {
        return Math.PI * this.radius * this.radius;
    }
}

const myCircle = new Circle(5);
console.log(myCircle.getDimensions());     // Output: { width: 10, height: 10 }
console.log(`Area of circle: ${myCircle.area()}`); // Output: Area of circle: 78.53981633974483

Explanation:

• Abstract Class (Shape): Defines template properties (width, height) and an abstract method (area).
• Cannot Instantiate Shape: Trying to create an instance of Shape directly would result in an error.
• Concrete Derived Class (Circle): Inherits from Shape, initializes properties, and implements the abstract method (area).

Example 4: Combining Inheritance and Abstract Classes

This example combines concepts from the previous examples by creating an abstract class that can serve as a template for various shapes, each of which can extend and implement the abstract class methods accordingly.

Step-by-Step Implementation

1. Define an Abstract Class Shape:
   • Includes abstract method area().
   • Includes non-abstract method getDimensions().
2. Define Derived Classes Circle and Rectangle:
   • Both extend Shape and provide implementations for the abstract method area().

// Abstract Class: Shape
abstract class Shape {
    protected width: number;
    protected height: number;

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }

    abstract area(): number;

    getDimensions(): { width: number, height: number } {
        return { width: this.width, height: this.height };
    }
}

// Derived Class: Circle
class Circle extends Shape {
    private radius: number;

    constructor(radius: number) {
        super(radius * 2, radius * 2); // Diameter for width and height
        this.radius = radius;
    }

    area(): number {
        return Math.PI * this.radius * this.radius;
    }
}

// Derived Class: Rectangle
class Rectangle extends Shape {
    constructor(width: number, height: number) {
        super(width, height);
    }

    area(): number {
        return this.width * this.height;
    }
}

const myCircle = new Circle(5);
console.log(myCircle.getDimensions()); // Output: { width: 10, height: 10 }
console.log(`Area of circle: ${myCircle.area()}`); // Output: Area of circle: 78.53981633974483

const myRectangle = new Rectangle(3, 7);
console.log(myRectangle.getDimensions()); // Output: { width: 3, height: 7 }
console.log(`Area of rectangle: ${myRectangle.area()}`); // Output: Area of rectangle: 21

Explanation:

• Abstract Class (Shape): Provides a common interface for different shapes.
• Derived Class (Circle): Implements the area() method using the radius property.
• Derived Class (Rectangle): Implements the area() method using the width and height properties.

Example 5: Inherited Constructor Overriding

Sometimes you might want to override the constructor in a derived class to have a different constructor signature or additional behavior. Here's how:

Step-by-Step Implementation

1. Define a Base Class Person:
   • Has a constructor initializing firstName and lastName.
2. Define a Concrete Class Employee:
   • Inherits from Person.
   • Overrides the constructor to also take an employeeId.