Typescript Abstract Class

In TypeScript, an interface is a powerful way to define the shape of an object, specifying the properties and methods it must have. Normally, interfaces extend other interfaces. However, TypeScript also allows an interface to extend a class.

Syntax:

abstract class Animal {
  abstract makeSound(): void; 

  move(): void {         
    console.log("Moving...");
  }
}

In the above syntax:

• Abstract keyword is used for both the class and its abstract methods.
• The subclass must implement all abstract methods otherwise, it will cause an error.

Now let's understand this with the help of example:

abstract class Animal {
  abstract makeSound(): void; 

  move(): void {
    console.log("The animal is moving.");
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log("Woof! Woof!");
  }
}

class Cat extends Animal {
  makeSound(): void {
    console.log("Meow!");
  }
}

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

const cat = new Cat();
cat.makeSound(); 

Output

Woof! Woof!
The animal is moving.
Meow!

In this example:

• Animal is an abstract class with an abstract method makeSound and a regular method move.
• The makeSound method does not have an implementation, so any class that extends Animal must provide an implementation for makeSound.

Basic Usage of Abstract Classes

This TypeScript code defines an abstract Animal class with a constructor that sets the name property, an abstract makeSound() method, and a move() method that logs a movement message. The Dog and Cat classes extend Animal, implementing the makeSound() method with species-specific sounds. Instances of Dog and Cat are created, and their makeSound() and move() methods output appropriate messages for each animal.

Example: This example illustrates the basic usage of abstract classes.

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

    abstract makeSound(): void;

    move(): void {
        console.log(`${this.name} is moving.`);
    }
}

class Dog extends Animal {
    makeSound(): void {
        console.log(`${this.name} says: Woof!`);
    }
}

class Cat extends Animal {
    makeSound(): void {
        console.log(`${this.name} says: Meow!`);
    }
}

const dog = new Dog('Buddy');
const cat = new Cat('Whiskers');

dog.makeSound();
dog.move();

cat.makeSound();
cat.move();     

Output:

Buddy says: Woof!
Buddy is moving.
Whiskers says: Meow!
Whiskers is moving.

In this example:

• Animal: abstract class with name, makeSound() (abstract), and move() (shared).
• Dog: implements makeSound() → "Buddy says: Woof!"
• Cat: implements makeSound() → "Whiskers says: Meow!"
• Both reuse move() → "<name> is moving."

Advanced Usage with Abstract Methods

This TypeScript code defines an abstract Shape class with abstract methods area() and perimeter() , and a describe() method to log these values. The Circle and Rectangle classes extend Shape , implementing their respective area and perimeter calculations based on given dimensions (radius for circle, width and height for rectangle). Instances of Circle and Rectangle are created, and their describe() method outputs calculated area and perimeter values.

Example: This example shows the use of abstract class and the abstract function.

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

    describe(): void {
        console.log(`Area: ${this.area()}, 
        Perimeter: ${this.perimeter()}`);
    }
}

class Circle extends Shape {
    constructor(private radius: number) {
        super();
    }

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

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

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

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

    perimeter(): number {
        return 2 * (this.width + this.height);
    }
}

const circle = new Circle(5);
const rectangle = new Rectangle(10, 20);

circle.describe();
rectangle.describe(); 

Output:

Area: 78.53981633974483, Perimeter: 31.41592653589793
Area: 200, Perimeter: 60 

In this example:

• Shape is an abstract class with abstract methods area() and perimeter(), plus a concrete describe() method to print results.
• Circle and Rectangle extend Shape, each providing their own formulas for area and perimeter.
• circle.describe(): prints area & perimeter of a circle with radius 5.
• rectangle.describe(): prints area & perimeter of a rectangle 10×20.