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

How to Easily Extend Interfaces in TypeScript

Ferenc Almasi β€’ 2022 September 23 β€’ πŸ“– 3 min read

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:

interface Fruit {
    sweet: boolean
}

interface Tomato extends Fruit {
  
}
Copied to clipboard!

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.

interface Fruit {
    sweet: boolean
}

interface Vegetable {
    berry: boolean
}

interface Tomato extends Fruit, Vegetable {
  
}
Extending multiple interfaces
Copied to clipboard!

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:

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
}
Copied to clipboard!

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.

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
Copied to clipboard!
Looking to improve your skills? Master TypeScript from start to finish.
Master TypeScript

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:

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
Copied to clipboard!

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.

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')
    }
}
Copied to clipboard!

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.

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 {
    ...
}
Copied to clipboard!
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended