How To Use Functions In TypeScript Interfaces?

Recently, one of my team members asked about using functions in TypeScript interfaces. Using functions in interfaces allows you to define contracts for classes that implement the interface, ensuring consistent behavior across your codebase. In this tutorial, I will explain how to use functions in TypeScript interfaces.

Table of Contents

Define an Interface with TypeScript Function Signatures

First, let’s define an interface called Blogger that includes a function signature:

interface Blogger {
  name: string;
  location: string;
  writePost(title: string, content: string): void;
}

In this example, the Blogger interface requires any class that implements it to have a name property of type string, a location property of type string, and a writePost function that accepts two string parameters (title and content) and returns void.

Read Check if an Object Implements an Interface in TypeScript

Implement the Interface in a TypeScript Class

Now, let’s create a class called USBlogger that implements the Blogger interface. Here is the complete TypeScript code.

class USBlogger implements Blogger {
  name: string;
  location: string;

  constructor(name: string, location: string) {
    this.name = name;
    this.location = location;
  }

  writePost(title: string, content: string): void {
    console.log(`${this.name} from ${this.location} wrote a post titled: "${title}"`);
    console.log(`Content: ${content}`);
  }
}

The USBlogger class satisfies the Blogger interface by providing implementations for the name and location properties, as well as the writePost function.

Read Optional Parameters in TypeScript Interfaces

Using the Class and Interface

We can now create an instance of the USBlogger class and call the writePost function:

const johnDoe = new USBlogger("John Doe", "New York");
johnDoe.writePost("My Experience in the Big Apple", "I love living in New York City because...");

Here is the complete TypeScript code.

interface Blogger {
    name: string;
    location: string;
    writePost(title: string, content: string): void;
  }
  class USBlogger implements Blogger {
    name: string;
    location: string;
  
    constructor(name: string, location: string) {
      this.name = name;
      this.location = location;
    }
  
    writePost(title: string, content: string): void {
      console.log(`${this.name} from ${this.location} wrote a post titled: "${title}"`);
      console.log(`Content: ${content}`);
    }
  }
  const johnDoe = new USBlogger("John Doe", "New York");
johnDoe.writePost("My Experience in the Big Apple", "I love living in New York City because...");

This code will output:

John Doe from New York wrote a post titled: "My Experience in the Big Apple"
Content: I love living in New York City because...

You can see the exact output in the screenshot below:

Read Check if an Object is Type of Interface in TypeScript

Benefits of Using Functions in TypeScript Interfaces

By using functions in TypeScript interfaces, you can ensure that classes implementing the interface adhere to a specific structure and behavior. This helps maintain consistency and reduces the likelihood of errors in your codebase.

Improved Code Organization

Defining functions in interfaces helps improve code organization by clearly defining the expected behavior of classes that implement the interface. This makes it easier for developers to understand the purpose and functionality of each class.

Enhanced Maintainability

Using functions in interfaces ensures that all classes implementing the interface follow a consistent structure and behavior. This consistency makes it easier to maintain and update the codebase, as changes can be made in a single place (the interface) and propagate to all implementing classes.

Conclusion

In this tutorial, I explained how to use functions in TypeScript interfaces. Incorporating functions in TypeScript interfaces allows you to define contracts for classes.