How To Use TypeScript Interface Function Properties?

In this tutorial, I will explain how to use TypeScript interface function properties effectively. Interfaces in TypeScript help to define the structure of objects, ensuring type safety and consistency in your code.

Table of Contents

Understanding TypeScript Interfaces

TypeScript interfaces allow you to define contracts for objects, functions, and classes. They ensure that the objects adhere to a specific structure, making your code more predictable and easier to debug.

Basic Interface Example

Let’s start with a simple example. Suppose we have a Person interface that describes the structure of a person object:

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

This interface ensures that any object of type Person will have firstName, lastName, and age properties.

Check out Define and Use TypeScript Interface Array of Objects

Interface Function Properties

Interfaces can also define function properties, which specify the type of functions that can be included in an object. This is particularly useful when dealing with callbacks or methods within objects.

Defining a Function Property

Let’s extend our Person interface to include a method that returns the full name of the person:

interface Person {
  firstName: string;
  lastName: string;
  age: number;
  getFullName: () => string;
}

Here, getFullName is a function property that takes no arguments and returns a string. Any object that implements this interface must provide an implementation for getFullName.

Read Create an Object from an Interface in TypeScript

Implementing the Interface

Now, let’s implement an object that adheres to the Person interface:

const person: Person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  getFullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(person.getFullName()); // Output: John Doe

In this example, the person object correctly implements the Person interface, including the getFullName method.

Here is the complete example:

interface Person {
    firstName: string;
    lastName: string;
    age: number;
  }
  interface Person {
    firstName: string;
    lastName: string;
    age: number;
    getFullName: () => string;
  }
  const person: Person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    getFullName: function() {
      return `${this.firstName} ${this.lastName}`;
    }
  };
  
  console.log(person.getFullName()); // Output: John Doe

You can see the exact output in the screenshot below:

TypeScript Interface Function Properties

Advanced Example: Callback Function Property

Consider a scenario where we need a Task interface with a callback function that is called when the task is completed:

interface Task {
  title: string;
  description: string;
  completeTask: (callback: (message: string) => void) => void;
}

The completeTask method takes a callback function as an argument. The callback function itself takes a string message as an argument and returns void.

Check out Choose Between TypeScript Classes and Interfaces

Implementing the Task Interface

Let’s implement a Task object that uses this interface:

const task: Task = {
  title: "Complete TypeScript Tutorial",
  description: "Finish the TypeScript tutorial on interfaces and function properties.",
  completeTask: function(callback) {
    console.log("Task is being completed...");
    callback(`Task "${this.title}" is completed.`);
  }
};

task.completeTask((message) => {
  console.log(message); // Output: Task "Complete TypeScript Tutorial" is completed.
});

In this example, the task object implements the Task interface, and the completeTask method calls the provided callback function with a message.

Conclusion

TypeScript interface function properties are a powerful feature that can enhance the flexibility and robustness of your code. In this tutorial, I explained how to use TypeScript interface function properties.