extend Keyword in Typescript

Do you want to know about the extend keyword in Typescript? In this Typescript tutorial, I will explain how to use the extend keyword in Typescript and Typescript extend keyword syntax, and a few examples of how to use the extend keyword in Typescript.

The TypeScript extends keyword is used for class inheritance, allowing one class to inherit the properties and methods of another class. It facilitates code reusability and object-oriented programming practices. For example, in class Dog extends Animal, the Dog class inherits from Animal, gaining access to its methods and properties.

extend Keyword in Typescript

Typescript extend keyword mostly used in object-oriented programming. It is primarily used for inheritance, allowing new classes to inherit properties and methods from existing classes in Typescript.

Inheritance is a fundamental concept in object-oriented programming. It allows a class to inherit properties and methods from another class, promoting code reusability and scalability.

extend Keyword Syntax in Typescript

Here is the syntax of the extend keyword in Typescript.

class BaseClass {
    // Base class code
}

class DerivedClass extends BaseClass {
    // Derived class code
}

How to use Typescript extend keyword

Now, let us try to understand how to use the extend keyword in Typescript with a few examples.

Here is the complete Typescript code for an inheritance example.

class User {
    username: string;
    email: string;

    constructor(username: string, email: string) {
        this.username = username;
        this.email = email;
    }

    login(): void {
        console.log(`${this.username} logged in.`);
    }
}

class AdminUser extends User {
    manageUsers(): void {
        console.log(`${this.username} can manage users.`);
    }
}

class RegularUser extends User {
    postComment(comment: string): void {
        console.log(`${this.username} posted a comment: ${comment}`);
    }
}

const admin = new AdminUser('AdminJoe', 'adminjoe@example.com');
const regular = new RegularUser('UserBob', 'userbob@example.com');

admin.login();
admin.manageUsers();

regular.login();
regular.postComment("Great post!");

In this example, AdminUser and RegularUser both extend the User class, inheriting the username, email, and login method. However, each derived class has its specific methods: AdminUser can manage users, while RegularUser can post comments.

You can see the output in the screenshot below once you run the code using Visual Studio code editor.

extend Keyword in Typescript

Typescript extend keyword advanced examples

Now, let us check a few advanced examples of how to use the extend keyword in Typescript. TypeScript’s extends keyword allows for more advanced inheritance scenarios, such as method overriding and polymorphism.

Method Overriding

In a web application, an AdminUser might have a different way of logging in compared to a regular user. This can be depicted with method overriding.

class User {
    username: string;
    email: string;

    constructor(username: string, email: string) {
        this.username = username;
        this.email = email;
    }

    login(): void {
        console.log(`${this.username} logged in with email.`);
    }
}

class AdminUser extends User {
    login(): void {
        console.log(`${this.username} logged in with admin privileges.`);
        super.login();
    }
}

const admin = new AdminUser('AdminJane', 'adminjane@example.com');
admin.login();

Here, the AdminUser class overrides the login method to indicate admin privileges but also calls the base class’s login method using super.login().

Polymorphism

Polymorphism allows treating objects of different classes as objects of a common superclass. Let’s see an example where both regular and admin users perform actions, but the actions are specific to their roles.

class RegularUser extends User {
    postComment(comment: string): void {
        console.log(`${this.username} posted a comment: ${comment}`);
    }
}

// Assuming AdminUser and User classes from the previous example

const users: User[] = [new AdminUser("SuperAdmin", "admin@example.com"), new RegularUser("UserMike", "usermike@example.com")];

users.forEach(user => {
    user.login(); // Polymorphic behavior

    if (user instanceof AdminUser) {
        user.manageUsers(); // Specific to AdminUser
    } else if (user instanceof RegularUser) {
        user.postComment("Hello World!"); // Specific to RegularUser
    }
});

In this polymorphism example, we treat both AdminUser and RegularUser instances as User objects. We then use instanceof to determine their actual types and call role-specific methods.

Conclusion

In this tutorial, I have explained the importance of the extend keyword in Typescript. And how to use the extend keyword in Typescript with a few examples. I have also shown you how to use the Typescript extend keyword in method overriding and polymorphism.

You may also like:

>