πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.

How to Easily Extend Interfaces in TypeScript

Ferenc Almasi β€’ 2022 September 23 β€’ Read time 3 min read
  • twitter
  • facebook
TypeScript

To extend interfaces in TypeScript with other interfaces, you need to use the extends keyword with the name of the interface you want to extend. For example:

Copied to clipboard!
interface Fruit {
    sweet: boolean
}

interface Tomato extends Fruit {
  
}

In the above code example, the Tomato interface now extends the Fruit interface, meaning it will now also have a sweet property. You can also extend multiple interfaces at once by comma separating them.

Copied to clipboard!
interface Fruit {
    sweet: boolean
}

interface Vegetable {
    berry: boolean
}

interface Tomato extends Fruit, Vegetable {
  
}
Extending multiple interfaces

Note that when extending interfaces, you cannot redeclare the same properties on the extended interface, and this is clearly stated with error messages in TypeScript. Take the following as an example:

Copied to clipboard!
interface Person {
    age: number
}

// ❌ This will cause the below error:
// Interface 'Employee' incorrectly extends interface 'Person'.
//   Types of property 'age' are incompatible.
//     Type 'string' is not assignable to type 'number'.
interface Employee extends Person {
    age: string
}

We have the Employee interface that extends the Person, but tries to assign a different type to the age property that is already declared on the Person interface. This will cause the above error in TypeScript.

Interfaces can also extend types using the extends keyword, and you also have the option to combine both of them and extend interfaces and types at the same time. However, for keeping things consistent, it is recommended to only do one or the other.

Copied to clipboard!
type Fruit {
    sweet: boolean
}

interface Vegetable {
    berry: boolean
}

// Tomato now extends both Fruit and Vegetable using a type and an interface
interface Tomato extends Fruit, Vegetable {
  
}
Extending multiple interfaces and types

Extending Classes With Interfaces

The extends keyword can also be used with classes. In this case, a class can extend another class. In practice, this looks like the following:

Copied to clipboard!
class Vegetable {
    berry: boolean = true
}

// Tomato now also has a property called "berry"
class Tomato extends Vegetable { ... }

// This will throw an error: "Classes can only extend a single class."
class Tomato extends Vegetable, Fruit { ... }
Extending classes

Note that you cannot extend multiple classes at once. In order to extend two different classes, you will need to create a class that defines the properties and methods of the class that you want to extend.

When extending classes, you can also overwrite the existing properties and methods of the extended class. This will mean that the overwritten value will be used instead of the inherited one. This is also known as polymorphism.

Copied to clipboard!
class A {
    greet() {
        console.log('Hello from A')
    }
}

// B extends A, but overwrites the greet method, assigning it a new functionality
class B extends A {
    greet() {
        console.log('Hello from B')
    }
}

And finally, to use interfaces on classes, you need to use the implements keyword. The same class can implement multiple interfaces using a comma-separated list, and it can also extend a class at the same time if needed.

Copied to clipboard!
interface Fruit {
    sweet: boolean
}

interface Vegetable {
    berry: boolean
}

// Implementing multiple interfaces
class Tomato implements Fruit, Vegetable {
    sweet = false
    berry = true
}

// Extending a class and implementing interfaces at the same time
class Tomato extends Food implements Fruit, Vegetable {
    ...
}
  • twitter
  • facebook
TypeScript
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.