Working with Abstract Classes and Interfaces in TypeScript

1. Introduction

In this tutorial, we will cover the concept of abstract classes and interfaces in TypeScript. Understanding these concepts will help you create more structured and uniform code in TypeScript. By the end of this tutorial, you will have a solid understanding of how to define and work with abstract classes and interfaces.

What you will learn:

• Definition and usage of Abstract Classes in TypeScript
• Definition and usage of Interfaces in TypeScript
• Differences between Abstract Classes and Interfaces

Prerequisites:

• Basic knowledge of TypeScript

2. Step-by-Step Guide

Abstract Classes

Abstract classes are base classes from which other classes may be derived. They may not be instantiated directly. Unlike an interface, an abstract class may contain implementation details for its members.

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('Moving...');
    }
}

In the above example, Animal is an abstract class that has an abstract method makeSound. It also has a normal method move.

Remember:

• Abstract classes cannot be instantiated.
• If a class has at least one abstract method, it must be defined as abstract.

Interfaces

An interface is a syntactical contract that an entity should conform to. They are used to define the structure of variables, functions, classes or objects.

interface Animal {
    name: string;
    age: number;
    makeSound(): void;
}

In the above example, Animal is an interface that expects any object implementing it to have a name, age, and a function makeSound.

Remember:

• Interfaces define properties, methods, and events, which are the members of the interface.
• Interfaces contain only the declaration of the members.

3. Code Examples

Abstract Classes

abstract class Animal {
    abstract makeSound(): void;

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

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

const myDog = new Dog();
myDog.makeSound(); // Barking...
myDog.move(); // Moving...

In the above example, Dog is a class that extends the abstract class Animal. It provides the implementation for the makeSound method. We can create an instance of Dog and call the makeSound and move methods.

Interfaces

interface Animal {
    name: string;
    age: number;
    makeSound(): void;
}

class Dog implements Animal {
    name = 'Tommy';
    age = 5;

    makeSound() {
        console.log('Barking...');
    }
}

const myDog = new Dog();
console.log(myDog.name); // Tommy
myDog.makeSound(); // Barking...

Here, Dog is a class that implements the Animal interface. It provides values for name, age and a method makeSound.

4. Summary

In this tutorial, we explored abstract classes and interfaces in TypeScript. We learned how to define and use them, and looked at some practical examples.

Key Points:

• Abstract classes are base classes from which other classes may be derived.
• Interfaces are a syntactical contract that an entity should conform to.

For further learning, you can explore:

• How to use interfaces to annotate parameters and return types of a function
• How to extend interfaces in TypeScript

5. Practice Exercises

Exercise 1: Create an abstract class Shape with methods calculateArea and calculatePerimeter. Then, implement this abstract class in a Circle class.

Exercise 2: Create an interface Vehicle with properties speed and model, and a method getDetails(). Then, create a Car class that implements this interface.

Remember, practice is the key to mastering any concept. Happy coding!