{

How to declare Return Types for Functions in TypeScript


This tutorial explains multiple ways to return multiple values in Typescript functions.

Function by default returns the single value in Function declaration.

Typescript function declaration contains the type of returned data.

Here is an example.

function functionname(): Type {
    return datatypevalue;
}

In the functionname is followed by colon and datatype.

How to return multiple values from a function in Typescript?

There are multiple ways to return an object from multiple values in Typescript. One way is using an Interface type that wraps the data inside an object of an interface type. Second-way using union type which wraps

wrap multiple fields as the Interface type

If function returns multiple values, Return the object of an interface in typescript.

First, Declare an interface that contains the type of the fields or properties Declare the functions that return the type of interface. Functions can be of normal functions or expressions as given below Inside a function, Create an object interface type and return the interface

Here is an example for returning multiple values using normal function and arrow lambda expression function using interfaces.

// Interface type 
interface Employee {
    id: number,
    name: string,
    salary: number
}
// Normal Function declaration
function getEmployee(): Employee {
    const employee: Employee = {
        id: 11,
        name: 'John',
        salary: 5000
    };
    return employee;
}
// Lambda functional expression
const getEmployee1=()=>{
        const employee: Employee = {
        id: 11,
        name: 'John',
        salary: 5000
    };
    return employee;
}

const { ...emp }: Employee = getEmployee();
console.log(emp.id)
console.log(emp.name)
console.log(emp.salary)

Output:

11
"John"
5000

Using Array tuple type with different types

A tuple is not a new named type, that is an array combination of existing types. use a Tuple array to return from a function for multiple values.

For example, the new tuple StringNumberType is declared of String and Number. It contains values of the first index string and a second index is a number.

type StringNumberType = [string, number];

Here is a function example that returns a tuple array.

function getData() : [string, number] {
  const data:[string, number]=["hello", 42];
  return data;
}
 
console.log(getData());

Using Array with return single type of multiple values

Functions can return multiple values, wrapped in an array. Array stores the same type of values. Since the array is an object of typescript, So, has to return Array<Number> or Array<String> values.

Here is a function example that returns an array of the same type

// Return multiple numbers
function getData() : Array<Number> {
const data:Array<number>=[1,4,5];
return data;
}
console.log(getData());

// Return multiple strings
function getStrings() : Array<String> {
const data:Array<String>=["one","two","three"];
return data;
}
console.log(getStrings());

Output:

[1, 4, 5]
 ["one", "two", "three"] 

use type aliases

Functions return multiple values in the object created using type aliases syntax.

You can return type alias names to normal and lambda functions

type Student = {
name: string;
id: number;
marks: number;
}

// Normal Function declaration
function getStudent(): Student {
const student: Student = {
id: 11,
name: 'John',
marks: 50
};
return student;
}
// Lambda functional expression
const getStudent1 = () => {
const student: Student = {
id: 11,
name: 'John',
marks: 50
};
return student;
}

const { ...st }: Student = getStudent();
console.log(st.id)
console.log(st.name)
console.log(st.marks)

Conclusion

Function by return single variable of an object in typescript. It can return multiple values using below approaches Array of same type Object using type aliases Object using interfaces Tuple

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.