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 the 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 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 of 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 newly 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 a single variable of an object in typescript. It can return multiple values using the below approaches Array of the same type Object using type aliases Object using interfaces Tuple