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? Check out our interactive course to master JavaScript from start to finish.
JavaScript Course

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!
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in 5 hours.

Learn More

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Read more on
🎉 Thank you for subscribing to our newsletter. x