Sling Academy
Home/TypeScript/How to Extend an Interface in TypeScript

How to Extend an Interface in TypeScript

Last updated: January 07, 2024

Overview

TypeScript’s powerful type system includes an elegant way to combine interfaces – through extension. This tutorial guides you through the nuances of interface extension, improving your code’s type safety and reusability with practical examples.

Understanding Interfaces

An interface in TypeScript is a way to define the shape of an object. It can include a mix of method and property declarations. Defining an interface is simple:

interface Person {
    name: string;
    age: number;
}

Basic Interface Extension

To extend an interface, you simply declare a new interface and use the extends keyword:

interface Employee extends Person {
    employeeId: number;
}

This means every Employee is also a Person with an additional employeeId property.

Extending Multiple Interfaces

TypeScript allows an interface to extend multiple interfaces, combining their properties:

interface Contactable {
    email: string;
}

interface Employee extends Person, Contactable {
    employeeId: number;
}

Now, an Employee is a Person who can also be contacted via email.

Overriding Properties in Interface Extension

When extending interfaces, it is also possible to override property types for more specific needs:

interface PartTimeEmployee extends Employee {
    hoursWorkedPerWeek: number;
}

// Overriding age to be optional
interface YoungIntern extends PartTimeEmployee {
    age?: number;
}

Extending Interfaces with Methods

Next to properties, we can also declare methods in an interface extension:

interface Manager extends Employee {
    manageTeam: () => void;
}

Generics and Interface Extension

Generics add the ability to create flexible and reusable interfaces:

interface Repository<T> {
    findById(id: number): T | undefined;
}

interface UserRepo extends Repository<User> {}

Advanced Use Cases: Conditional Types

TypeScript’s conditional types can be used within interface extensions to create complex, dynamic type relationships:

interface Searchable<T> {
    search: T extends string ? (query: string) => T[] : never;
}

This creates a search method only if T extends string.

Combining Interfaces with Type Aliases

Sometimes you may want to combine interfaces not through extension but by creating a type alias:

type EmployeeDetails = Person & Contactable & { employeeId: number };

This method uses the type intersection operator & to combine types.

Best Practices

Even though TypeScript’s flexibility with interfaces is vast, it’s important to follow best practices such as preferring small, reusable interfaces and avoiding overextending.

Conclusion

Extending interfaces in TypeScript can lead to more maintainable and reusable code by building on existing type definitions. Whether you’re a beginner or advanced TypeScript user, continually practicing and refining the use of interfaces will surely pay off.

Next Article: Multiple Inheritance of Interface in TypeScript

Previous Article: How to Reopen an Interface in TypeScript

Series: The First Steps to TypeScript

TypeScript

You May Also Like

  • TypeScript: setInterval() and clearInterval() methods (3 examples)
  • TypeScript sessionStorage: CRUD example
  • Using setTimeout() method with TypeScript (practical examples)
  • Working with window.navigator object in TypeScript
  • TypeScript: Scrolling to a specific location
  • How to resize the current window in TypeScript
  • TypeScript: Checking if an element is a descendant of another element
  • TypeScript: Get the first/last child node of an element
  • TypeScript window.getComputerStyle() method (with examples)
  • Using element.classList.toggle() method in TypeScript (with examples)
  • TypeScript element.classList.remove() method (with examples)
  • TypeScript: Adding Multiple Classes to An Element
  • element.insertAdjacentHTML() method in TypeScript
  • TypeScript – element.innerHTML and element.textContent
  • Using element.removeAttribute() method in TypeScript
  • Working with Document.createElement() in TypeScript
  • Using getElementById() method in TypeScript
  • Using Window prompt() method with TypeScript
  • TypeScript – window.performance.measure() method (with examples)