How to Return Multiple Values in TypeScript?

Recently, one of my team members struggled to find out how to return multiple values in TypeScript. There are various methods to do it. In this tutorial, I will explain how to return multiple values from a function in TypeScript with examples.

Why Return Multiple Values in TypeScript?

In many real-world applications, a function may need to return more than one value. For instance, when fetching user data, you might want to return both the user profile and the status of the operation. TypeScript, being a superset of JavaScript, allows us to use several techniques to return multiple values.

There are various methods to achieve this, and let me know each method with an example.

Methods to Return Multiple Values in TypeScript

Here are different methods to return multiple values in TypeScript.

Using Arrays

One of the simplest ways to return multiple values in TypeScript is by using arrays. This method works well when the order of values is important. Let me show you an example.

Example:

function getUserData(): [string, number, boolean] {
    const name: string = "John Doe";
    const age: number = 30;
    const isActive: boolean = true;
    return [name, age, isActive];
}

const [name, age, isActive] = getUserData();
console.log(`Name: ${name}, Age: ${age}, Active: ${isActive}`);

In this example, the getUserData function returns an array containing a name, age, and active status. We then use array destructuring to extract these values.

Here is the exact output in the screenshot below:

Return Multiple Values in TypeScript

Check out How to Use Default Parameter Values in TypeScript?

Using Objects

Another common approach is to return an object to return multiple values in TypeScript. This method is more flexible and self-descriptive, making the code easier to understand.

Here is an example.

Example:

interface UserData {
    name: string;
    age: number;
    isActive: boolean;
}

function getUserData(): UserData {
    return {
        name: "Jane Smith",
        age: 25,
        isActive: false
    };
}

const userData = getUserData();
console.log(`Name: ${userData.name}, Age: ${userData.age}, Active: ${userData.isActive}`);

Here, the getUserData function returns an object of type UserData. This approach makes it clear what each value represents.

Here is the exact output in the screenshot below:

How to Return Multiple Values in TypeScript

Read How to Get the Return Type of a Function in TypeScript?

Using Tuples

TypeScript supports tuples, which can be used to return a fixed number of elements of different types. This method is particularly useful when you need the benefits of both arrays and objects.

Let me show you an example to help you understand it better.

Example:

type UserTuple = [string, number, boolean];

function getUserData(): UserTuple {
    return ["Alice Johnson", 28, true];
}

const [name, age, isActive] = getUserData();
console.log(`Name: ${name}, Age: ${age}, Active: ${isActive}`);

In this example, we define a tuple type UserTuple and use it to return multiple values from the getUserData function.

Read How to Use Default Function Parameters in TypeScript?

Using Custom Classes

For more complex scenarios, you might want to use classes to encapsulate the values you need to return.

Here is an example of returning multiple values in TypeScript using custom classes.

Example:

class UserData {
    constructor(
        public name: string,
        public age: number,
        public isActive: boolean
    ) {}
}

function getUserData(): UserData {
    return new UserData("Michael Brown", 40, true);
}

const userData = getUserData();
console.log(`Name: ${userData.name}, Age: ${userData.age}, Active: ${userData.isActive}`);

This approach provides more structure and allows for additional methods and properties within the returned class.

Conclusion

In this tutorial, I explained how to return multiple values from a function in TypeScript using different methods, such as arrays, objects, tuples, custom classes, etc.

You may also like: