Understanding TypeScript Classes and Inheritance Examples

Understanding TypeScript Classes and Inheritance

TypeScript, a superset of JavaScript, introduces strong typing and object-oriented programming features, including classes and inheritance. By mastering these concepts, you can create scalable and maintainable code. Let’s dive into some practical examples.

Example 1: Creating a Basic Class

First, let’s create a simple class called Animal:

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    makeSound(): string {
        return `${this.name} makes a sound.`;
    }
}

Explanation:

Class Declaration: We declare a class named Animal.
Properties: The class has a property name.
Constructor: The constructor initializes the name property.
Method: The makeSound method returns a string indicating the animal’s sound.

Example 2: Extending a Class (Inheritance)

Now, let’s create a subclass Dog that extends the Animal class:

class Dog extends Animal {
    makeSound(): string {
        return `${this.name} barks.`;
    }
}

Explanation:

Inheritance: The Dog class extends the Animal class, inheriting its properties and methods.
Overriding Method: The makeSound method is overridden to provide a specific implementation for dogs.

Example 3: Using the Classes

Let’s see how we can use these classes:

const myDog = new Dog('Buddy');
console.log(myDog.makeSound()); // Output: Buddy barks.

Explanation:

Creating an Instance: We create an instance of the Dog class with the name Buddy.
Calling a Method: We call the makeSound method, which outputs the specific sound for the dog.

Example 4: Adding Additional Properties and Methods

We can expand on our Dog class by adding more properties and methods:

class Dog extends Animal {
    breed: string;
    constructor(name: string, breed: string) {
        super(name); // Call the parent class constructor
        this.breed = breed;
    }
    fetch(): string {
        return `${this.name} is fetching the ball.`;
    }
}

Explanation:

Additional Property: The breed property is added to the Dog class.
Constructor Call: We use super(name) to invoke the constructor of the Animal class.
New Method: The fetch method provides functionality specific to dogs.

Conclusion

In this article, we explored the basics of classes and inheritance in TypeScript. We created a simple Animal class, extended it with a Dog class, and demonstrated how to add additional properties and methods. Understanding these concepts will greatly enhance your ability to write organized and reusable TypeScript code.

Mastering TypeScript Classes and Inheritance