Sometimes, when we have already declared an interface, but then we want to add a new property to create an object with a new property based on the previous interface. How do we do that? This article will show you how to do it by using extends keywords and intersection types.
Ways to add property to existing interface (extend) in TypeScript
The interface is a static data type, so you cannot dynamically add a property to an existing interface but must use some other way, such as creating a new interface that inherits the properties of the interface we want to add new properties to, by this way we will have a new interface that includes the new property.
Using extends keyword
Interfaces are like classes. You can copy the properties of one into another to increase flexibility in data usage. We can also use this method to add a property to an existing interface by creating a new interface that includes the property we want to add.
Example:
interface Student {
id: number;
name: string;
}
// Use "extends" keyword to add property to existing interface
interface StudentWithSubject extends Student {
subject: string;
}
// We have new interface with new property
const student: StudentWithSubject = {
id: 12,
name: "John",
subject: "Software Technology",
};
console.log(student);Output:
{ id: 12, name: 'John', subject: 'Software Technology' }In the above example, we have an interface named Student. This interface is missing an attribute that is a student’s subject. If we add this subject property directly, it will cause data errors in objects that we created earlier, so we will create a new interface with the subject property by inheriting the properties of the Student interface and using it where we want to use it without affecting previously created objects.
Using Intersection Types
The interface is very similar to a union, but the usage is very different. Intersection Types combine multiple elements into one component. This allows you to combine existing versions to get a single version that has all the properties you want. We can use this feature to add a property to an existing interface.
Example:
interface Student {
id: number;
name: string;
}
// Use intersection types to add property to existing interface
type StudentWithSubject = Student & {
subject: string;
};
// We have new interface with new property
const student: StudentWithSubject = {
id: 12,
name: "John",
subject: "Software Technology",
};
console.log(student);Output:
{ id: 12, name: 'John', subject: 'Software Technology' }Summary
Through this article, we have understood the ways to add a property to an existing interface in TypeScript using extends keywords and intersection types. We should use extends keywords because it will create a new interface with the property we want to use.
Carolyn Hise has three years of software development expertise. Strong familiarity with the following languages is required: Python, Typescript/Nodejs, .Net, Java, C++, and a strong foundation in Object-oriented programming (OOP).