How To Return Multiple Values From A Function In Typescript

Posted on by Brent Johnson
Return Multiple values from a Function in TypeScript

Sometimes while working with the function, you must store and return multiple values. So how to return multiple values from a function in TypeScript? Let’s go into detail now.

The solution to return multiple values from a function in Typescript

Store in array

Of course, it is impossible to return multiple values in the usual way because a function can only return values. So we will wrap multiple values inside a parent container like a trick which here I an array.

Example:

// Create a function that caculate age and id then return it
function caculateFunc(bornYear: number, serial: number) {
    const age: number = 2022 - bornYear;
    const id: number = 1000 - serial;
    return [age, id];
}

Here I wrap the age and id variable inside an array, so if you want to return more value, you can wrap all of it inside an array like this. To get the value from the function, you can use destructuring assignment syntax. You can understand destructuring like it will help you unpack all elements from your array or property from your object. For example, here, my array has elements, and I want to destructure it and assign both values in two variables. I can use destructuring to do it.

Example:

// Create an array with 2 element and store that element in ele1 and ele2 variable
const [ele1, ele2] = [9 ,10]

console.log(ele1 , ele2)

Output:

[LOG]: 9, 10

As you see, I destructured the array by using the array sign and then assigning it in ele1 and ele2. To apply our problem, I can use destructuring to get value from the function.

Example:

// Create a function that caculate age and serial then return it
function caculateFunc(bornYear: number, serial: number) {
    const age: number = 2022 - bornYear;
    const id: number = 1000 - serial;
    return [age, id];
}
  
// Store value in age and id variable
const [age, id] = caculateFunc(1990, 3);

console.log(age);
console.log(id);

Output: 

[LOG]: 32 
[LOG]: 997

The caculateFunc will return an array as a value, so I can use destructuring to get each value. With an array, the name assigned is up to you.

Store in object

You can also store multiple values in an object and use destructuring to get value.

Example:

// Create a function that trim name string and caculate age then return it
function caculateFunc(name: string, yearBorn: number, address: string) {
    const nameTrimed = name.trim();
    const age = 2022 - yearBorn;
  
    return { name: nameTrimed, age: age, address: address };
}
  
// Store value in name,age,address variable
const { name, age, address } = caculateFunc(" James", 1990, "England");

console.log(name);
console.log(age);
console.log(address);

Output:

[LOG]: "England" 
[LOG]: "James" 
[LOG]: 32

But remember here, destructuring with the object you will have to write the correct property name to get that property. If not, you will get the error.

Example:

// Create a function that caculate trim name string and caculate age then return it
function caculateFunc(name: string, yearBorn: number, address: string) {
    const nameTrimed = name.trim();
    const age = 2022 - yearBorn;
    return { name: nameTrimed, age: age, address: address };
}

// Store value in name1, age ,address variable
const { name1, age, address } = caculateFunc(" James", 1990, "England")

The error:

Property 'name1' does not exist on type '{ name: string; age: number; address: string; }'.

The error happened because I used an incorrect property name that doesn’t exist on the object returned by caculateFunc.

Summary

In this article, I showed and explained how to return multiple values from a function in TypeScript. You can wrap multiple values inside an array or object and then get the value by using the destructuring assignment. Good luck for you!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *