Introduction

When working with TypeScript, we often find ourselves in situations where we need to extend an existing interface to add additional properties or methods to it. This is where the extend interface in TypeScript comes into play. In this article, we will be discussing how to use the extend interface in TypeScript.

What is Extend Interface in TypeScript?

In TypeScript, an interface can be extended to create a new interface that inherits the properties and methods of the base interface. This is known as an “extended interface”. The extended interface can then be used to define objects that have all the properties of the base interface as well as the additional properties defined in the extended interface.

How to Use Extend Interface in TypeScript?

To use the extend interface in TypeScript, we need to use the extends keyword. The syntax for extending an interface is as follows:

Syntax:





interface BaseInterface {

    // properties and methods

}



interface ExtendedInterface extends BaseInterface {

    // additional properties and methods

}

In the above example, the ExtendedInterface extends the BaseInterface and inherits all its properties and methods. ExtendedInterface also defines additional properties and methods which are not present in the BaseInterface.

Examples of Extend Interface in TypeScript

Let’s consider an example where we have a Car interface with make and model properties. We then want to create a new interface ElectricCar that extends the Car interface and adds a new range property.

Code:





interface Car {

    make: string;

    model: string;

}



interface ElectricCar extends Car {

    range: number;

}



// Create an object of ElectricCar

let myElectricCar: ElectricCar = {

    make: 'Tesla',

    model: 'Model S',

    range: 500

};

In the above example, we create an ElectricCar interface by extending the Car interface and adding a new range property. We then create an object of the ElectricCar interface that has all the properties of the base Car interface as well as the additional range property.

FAQs

What is an Interface in TypeScript?

An interface in TypeScript is a contract that defines the structure of an object. It defines the properties and methods that an object should have. It does not provide any implementation but only provides a set of rules that should be followed when creating an object.

What is the difference between an Interface and a Class in TypeScript?

An interface provides a set of rules that an object should follow while a class is an implementation of those rules. In other words, an interface is like a blueprint for an object while a class is the actual object that is created based on the blueprint.

Can we extend multiple interfaces in TypeScript?

Yes, we can extend multiple interfaces by separating them with commas. The syntax is as follows:





interface A {

    // properties and methods

}



interface B {

    // properties and methods

}



interface C extends A, B {

    // additional properties and methods

}

Can we extend built-in interfaces in TypeScript?

Yes, we can extend built-in interfaces in TypeScript. For example, we can extend the Array interface to create a new interface that has all the properties and methods of the Array interface as well as some additional properties and methods.





interface MyArray extends Array<string> {

    // additional properties and methods

}

Can we use the extend interface with a class?

No, we cannot use the extend interface with a class. Interfaces are used to define the structure of an object while classes are used to create objects with that structure.

Conclusion

The extend interface in TypeScript is a powerful feature that allows us to create new interfaces that inherit the properties and methods of existing interfaces. We can then use these extended interfaces to define objects that have all the properties of the base interface as well as the additional properties defined in the extended interface.

Similar Posts