Extending object-like types with interfaces in TypeScript

Editor’s note: This article was last updated on 19 September 2023 to add information about inheritance in TypeScript interfaces, including multiple inheritance and overriding properties in inherited interfaces.

Interfaces are one of TypeScript’s core features, allowing developers to flexibly and expressively enforce constraints on their code to reduce bugs and improve code readability. Let’s explore the various interface characteristics and how we might better leverage them in our programs.

Jump ahead:

• What are TypeScript interfaces?
  • Interfaces vs. types
• Inheritance in TypeScript interfaces
  • Extending interfaces
  • Multiple inheritance
  • Overriding properties and methods
• Expanding interfaces in TypeScript
  • Option 1: Declaration merging
  • Declaration merging to wrangle disparate user preferences
  • Option 2: Extending interfaces in TypeScript
  • Extending interfaces to form a type-safe global state store
  • Extending types
• Leveraging interfaces with generics in TypeScript
  • Applying generic constraints
• Use cases for interfaces in TypeScript
  • Using interfaces for functions
  • Using interface as a parameter type and return type
  • Using interfaces for class definitions
• Pros and cons of interfaces in TypeScript

What are TypeScript interfaces?

Interfaces allow developers to name a type for later reference in their programs. For example, a public library’s management software might have a Book interface for data representing books in the library’s collection:

interface Book {
  title: string;
  author: string;
  isbn: string;
}

With the interface, we can ensure that book data in the program contains the essential information of title, author, and ISBN. If it doesn’t, the TypeScript compiler will throw an error:

const tale: Book = {
  title: 'A Tale of Two Cities',
  author: 'Charles Dickens',
  // Error: Property 'isbn' is missing in type '{ title: string; author: string; }' but required in type 'Book'.
};

In our Book interface example above, all the attributes are defined as required. However, we can also define an interface to expect some optional attributes. This can be done by adding the ? symbol in the attribute definition.

To demonstrate this, let’s add an optional Boolean attribute signedCopy to our Book interface:

interface Book {
  title: string;
  author: string;
  isbn: string;
  signedCopy?: boolean;
}

Interfaces vs. types

If we’ve written TypeScript code before, we might be familiar with type aliases, another common way to name a type, and we might ask, “Why use interfaces over types or vice versa?”

The primary difference is that interfaces can be reopened for adding additional properties (via declaration merging) in different parts of the program, while type aliases cannot. In a later section, we’ll look at how to take advantage of declaration merging and some cases of when we might want to.

Inheritance in TypeScript interfaces

Extending interfaces

We can use the extend keyword in TypeScript to inherit all the properties from an existing interface. Here’s an example. The Dog and Fish interfaces extend the Pet interface, inheriting the name and age properties:

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

interface Dog extends Pet {
  breed: string;
}

interface Fish extends Pet {
  finColor: string;
}

const betta: Fish = {
  name: 'Sophie',
  age: 2,
  finColor: 'black',
};

This probably looks familiar to object-oriented programmers. However, interfaces offer a key feature not typically found in traditional object-oriented programming: multiple inheritance.

Multiple inheritance

Multiple inheritance allows us to combine behaviors and properties of multiple interfaces into a single interface.

TypeScript supports multiple interface inheritance, enabling a new interface to inherit from multiple base interfaces. Here’s how it works:

interface Animal {
  eat(): void;
}

interface Bird {
  fly(): void;
}

interface eagle extends Animal, Bird {
  // Inherits both eat and fly methods
}

In this example, the eagle interface inherits properties and methods from both Bird and Animal interfaces. An object of type eagle must include both fly and eat methods.

Overriding properties and methods

We can override properties and methods with new implementations when inheriting from an existing interface. This allows us to customize behavior while maintaining the original interface’s structure. Here’s an example:

interface Vehicle {
  startEngine(): void;
}

interface ElectricVehicle extends Vehicle {
  // Override startEngine method
  startEngine(): string;
}

const tesla: ElectricVehicle = {
  startEngine() {
    return 'Electric engine started';
  },
};

In this case, the ElectricVehicle interface overrides the startEngine method to provide a different implementation.

Expanding interfaces in TypeScript

Option 1: Declaration merging

As noted above, interfaces can be reopened to add new properties and expand the definition of the type. Here is a nonsensical example to illustrate this capability:

interface Stock {
  value: number;
}

interface Stock {
  tickerSymbol: string;
}

Of course, it’s not likely that the same interface would be reopened nearby like this. It would be clearer to define it in a single statement:

interface Stock {
  value: number;
  tickerSymbol: string;
}

So, when would we want to expand an interface in different parts of our program? Let’s look at a real-world use case.

Declaration merging to wrangle disparate user preferences

Suppose we are writing a React application, and we need some pages that will allow the user to configure information such as their profile, notification preferences, and accessibility settings. For clarity and user experience, we’ve split these concerns into three separate pages with the source code in three files: Profile.tsx, Notifications.tsx, and Accessibility.tsx.

From an application architecture perspective, it would be nice if all the user’s preferences were contained in a single object that adheres to an interface we’ll call Preferences. This way, we can easily load and save the preferences object with our backend API with just one or two endpoints rather than several.

The next question is: “Where should the Preferences interface be defined?” We could put the interface in its own file, preferences.ts, and import it into the three pages — or we could take advantage of declaration merging and have each page define only the properties of Preferences that it cares about, like so:

// Profile.tsx

interface Preferences {
  avatarUrl: string;
  username: string;
}

const Profile = (props) => {
  // ... UI for managing the user's profile ...
}
// Notifications.tsx

interface Preferences {
  smsEnabled: boolean;
  emailEnabled: boolean;
}

const Notification = (props) => {
  // ... UI for managing the user's notification preferences ...
}
// Accessibility.tsx

interface Preferences {
  highContrastMode: boolean;
}

const Accessibility = (props) => {
  // ... UI for managing the user's accessibility settings ...
}

In the end, the Preferences interface will resolve to contain all the properties as desired:

interface Preferences {
  avatarUrl: string;
  username: string;
  smsEnabled: boolean;
  emailEnabled: boolean;
  highContrastMode: boolean;
}

The UI code is now co-located with only the properties of Preferences it manages, making the program easier to understand and maintain. Nice!

Option 2: Extending interfaces in TypeScript

Another way to expand interfaces in TypeScript is to inherit from an existing interface using the extend keyword. As mentioned earlier, we can also extend a new interface from multiple interfaces.

Extending multiple interfaces refers to the concept of composition where the interface is designed to extend attributes it needs. It differs from the concept of inheritance in OOP where an object is a child of a given class and compulsorily extends the parent’s properties.

Let’s look at a use case for when we might want to do this.

Extending interfaces to form a type-safe global state store

Suppose we’re building an application that enables users to keep track of their to-do lists and daily schedules in one place. We’ll have some different UI components for tracking each of those tasks:

// todo-list.ts

interface ToDoListItem {
  title: string;
  completedDate: Date | null;
}

interface ToDoList {
  todos: ToDoListItem[];
}

// ... application code for managing to-do lists ...
// calendar.ts

interface CalendarEvent {
  title: string;
  start: Date;
  end: Date;
}

interface Calendar {
  events: CalendarEvent[];
}

// ... application code for managing the calendar ...

Now that we’ve created the basic interfaces for keeping track of our two pieces of state, we would like a single interface that represents the state of the entire application. We can use the extends keyword to create such an interface. We’ll also add a modified field so that we know when our state was last updated:

interface AppState extends ToDoList, Calendar {
  modified: Date;
}

Now we can use the AppState interface to ensure that the application is properly handling the state:

function persist(state: AppState) {
  // ... save the state to a storage layer ...
}

persist({
  todos: [
    { title: 'Text Marcy', completedDate: new Date('2022-02-05') },
    { title: 'Buy groceries', completedDate: null },
  ],
  events: [
    {
      title: 'Study',
      start: new Date('2022-02-11 08:00:00'),
      end: new Date('2022-02-11 10:00:00'),
    },
  ],
  modified: new Date('2022-02-06'),
});

Extending types

While re-opening interfaces is not possible with type aliases, this approach of extending types is, but with some subtle differences in syntax. Here’s the equivalent example adapted to use type instead of interface:

type ToDoListItem = {
  title: string;
  completedDate: Date | null;
}
type ToDoList = {
  todos: ToDoListItem[];
}
type CalendarEvent = {
  title: string;
  start: Date;
  end: Date;
}
type Calendar = {
  events: CalendarEvent[];
}
type AppState = ToDoList & Calendar & {
  modified: Date;
}
function persist(state: AppState) {
  // ... save the state to a storage layer ...
}
persist({
  todos: [
    { title: 'Text Marcy', completedDate: new Date('2022-02-05') },
    { title: 'Buy groceries', completedDate: null },
  ],
  events: [
    {
      title: 'Study',
      start: new Date('2022-02-11 08:00:00'),
      end: new Date('2022-02-11 10:00:00'),
    },
  ],
  modified: new Date('2022-02-06'),
});

Combining multiple type definitions is called intersection and is performed using the & symbol. Learn more by reading up on powerful type options in TypeScript.

Leveraging interfaces with generics in TypeScript

In TypeScript, generics enable us to create reusable code that works with multiple data types. Using interfaces with generics in TypeScript is a flexible approach to creating reusable and type-safe components and functions. It provides a way to define interfaces with various data types while maintaining type safety.

Generics are denoted by type parameters enclosed in angle brackets, such as <T>. For example, we need a Repository interface that can accept many different data types. We can define it with generics as shown below:

// Define a generic Repository interface
interface Repository<T> {
  findById(id: string): T;
  save(item: T): void;
}

The Repository<T> interface includes two methods: findById, which retrieves an entity by its ID, and save, which saves an entity. The type parameter T allows us to specify the entity type that the repository will work with.

We implement a BookRepository class below using the Repository<T> interface:

interface Book {
  title: string;
  ISBN: string;
}
// Create a BookRepository class that implements the Repository<Book> interface
class BookRepository implements Repository<Book> {
  private books: Record<string, Book> = {};

  findById(id: string): Book {
    return this.books[id];
  }

  save(book: Book): void {
    this.books[book.ISBN] = book;
  }
}

In the example, we implement the Repository<Book> interface. Thus, the BookRepository class has to conform to the contract defined in the interface. Any deviation from this contract would result in a compilation error, ensuring type safety. We can apply the same pattern to other entity types (e.g., Author, Publisher) by creating similar repository classes with different type parameters.

Applying generic constraints

Generic constraints in TypeScript restrict the types that can be used with a generic parameter to ensure they have specific properties or characteristics.

In the above example, let’s assume we want to ensure that T must have an id property. Here’s how we can apply a generic constraint. We update the Repository interface to include a generic constraint <T extends EntityWithId>. This constraint ensures that T must be a type that has an ID property:

interface EntityWithId {
  id: string;
}

// Define a generic Repository interface with a constraint
interface Repository<T extends EntityWithId> {
  findById(id: string): T;
  save(item: T): void;
}
// The BookRepository remains unchanged.

The BookRepository class still implements the Repository<Book> interface, but now it enforces that only entities with an id property can be used with this repository.

TypeScript compiler will throw an error at Repository<Book> because the Book interface doesn’t contain an id property:

To fix the issue, we need to add an id property like below:

interface Book {
  id: string;
  title: string;
  ISBN: string;
}

In summary, using generic constraints enhances type safety and prevents unintended usage.

Use cases for interfaces in TypeScript

Interfaces can be used to define a function or class’s expected properties — both required and optional. Let’s take a look at a few use cases.

Using interfaces for functions

We can use interfaces to define the shape of functions to ensure that they adhere to a specific structure when implemented. It is beneficial when we want to enforce consistency and type safety across the codebase.

Here is an example:

interface Book {
  title: string;
  isbn: string;
}
// Define a SearchBook interface for search functions
interface SearchBook {
  (books: Book[], searchTerm: string): Book[];
}

// Implement search functions that conform to the SearchBook interface
const searchByTitle: SearchBook = (books, searchTerm) => {
  return books.filter((book) =>
    book.title.toLowerCase().includes(searchTerm.toLowerCase())
  );
};

const searchByISBN: SearchBook = (books, searchTerm) => {
  return books.filter((book) =>
    book.isbn === searchTerm
  );
};

In this contrived example, we defined a SearchBook interface, which specifies a function interface that takes an array of Book objects and a searchTerm (a string) as parameters and returns an array of Book objects. Then, we implement two search functions, searchByTitle and searchByISBN, which conform to the SearchBook interface.

Using the function interface, we ensure that all search functions have the same signature, making them interchangeable and providing a clear contract for how search functions should behave.

Using interface as a parameter type and return type

Passing an interface as a parameter in TypeScript allows us to define a contract that objects must adhere to when passed as arguments to functions or methods.

Below is an example of using an interface to specify the expected parameters and results of a function:

 // function
interface Person {
  firstName: string;
  lastName: string;
  age?: number;
}

interface Bio {
  fullName: string;
  yearOfBirth?: number;
}

function getBio(person: Person): Bio {
  let yearOfBirth: number | undefined; // is initially undefined

  if (person?.age) {
      const today = new Date();
      yearOfBirth = today.getFullYear() - person.age;
  }

  return {
    fullName: `${person.firstName} ${person.lastName}`,
    yearOfBirth
  }
}

// TypeScript will throw an error like this
// Argument of type '{ firstName: string; lastName: string; gender: string; }' is not // assignable to parameter of type 'Person'.
//  Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.(2345)
const result = getBio({firstName: 'John', lastName: 'Dugan', gender: 'Male'});

In our example above, we defined an interface Person. This person object has the required properties firstName and lastName along with an optional property age, which is the expected function parameter. We also defined an interface Bio with a required property fullName and an optional property yearOfBirth, which the function returns.

If an incorrect property is passed in the person object, TypeScript will throw an error, ensuring strict type checking and adherence to the defined parameter interface.

Using interfaces for class definitions

We can define an interface for a class that specifies its expected properties and their shapes, then use the implements keyword to apply this definition to the class:

interface Animal {
   name: string;
   canWalk(): boolean;
}

class Cat implements Animal {
   name: string;

   constructor() {
      this.name = 'Cat';
   }

   canWalk() {
     return true;
   }
}

const cat = new Cat();
console.log(cat.canWalk());

In our example above, we have defined an interface Animal that the class Cat implements. This means Cat must have all the required properties defined in Animal.

Pros and cons of interfaces in TypeScript

When we discuss the pros and cons of interfaces, we are — to a large extent — discussing the pros and cons of TypeScript versus JavaScript. This is because typing and defining shapes via interfaces is a core feature of TypeScript.

Let’s start with the pros.

With TypeScript interfaces, we define what is expected and give our code consistency and dependability. By setting the type of variables, function parameters, or function results, we know what to expect and will get some compile-time errors alerting us that something is happening that is not allowed.

In the example below, our JavaScript function does not use a type to describe what is expected, which can lead to unexpected results:

function (a, b) => a + b
// TypeScript
function (a: number, b: number): number => a + b

A possible error in our JavaScript example is passing a string instead of a number. The outcome would be a string result (from concatenation) where a number was expected.

Compile-time errors in TypeScript occur at build time and, most importantly, before the function or code is run. This means errors are detected much sooner before they can cause any damage.

Finally, using interfaces to define code shapes makes managing the code base easier. By extension, this also has the potential to improve overall performance when working in a team.

Now, let’s explore some drawbacks of using interfaces in TypeScript.

It is easy to rely entirely on interfaces and types to prevent errors and have a false sense of security. While it helps to define the shapes of what is expected — and not expected — it isn’t infallible.

Additionally, implementing types and interfaces can easily and quickly complicate a code base. Just think about functions that take and handle different shapes or types of variables and the endless function overloading that can easily follow.

Conclusion

There are a few different ways to extend object-like types with interfaces in TypeScript, and sometimes, we may use type aliases.

In those cases, even the official docs say they are mostly interchangeable, at which point it’s down to style, preference, organization, habit, etc. But if we want to declare different properties on the same type in different parts of our program, use TypeScript interfaces.