How to Easily Extend Interfaces in 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:

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.

interface Fruit {
    sweet: boolean
}

interface Vegetable {
    berry: boolean
}

interface Tomato extends Fruit, Vegetable {
  
}

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
}

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 {
  
}

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Looking to improve your skills? Master TypeScript from start to finish.

---

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 { ... }

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')
    }
}

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 {
    ...
}