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.
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:

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.
You may also like:
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.