How to declare Return Types for Functions in TypeScript

This tutorial explains various methods to return multiple values in TypeScript functions.

By default, a function returns a single value in function declaration, where the TypeScript function declaration includes the type of the returned data.

Here is an example.

function functionName(): Type {
  return dataTypeValue;
}

In this, functionName is followed by a colon and the data type.

How to Return Multiple Values from a Function in TypeScript?

There are several ways to return an object containing multiple values in TypeScript. One way is by using an Interface type that encapsulates the data inside an object of an interface type. Another way is by using a union type.

  • Encapsulating Multiple Fields with Interface Type

    If a function returns multiple values, you can return an object of an interface in TypeScript.

    First, declare an interface containing the types of fields or properties. Then, declare functions that return the type of interface. These functions can be either normal functions or expressions, as shown below. Inside the function, create an object of the interface type and return the interface.

    Here’s an example demonstrating the return of multiple values using both a normal function and an 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 Tuple Array Type with Different Types

    A tuple is an array that combines existing types. You can use a Tuple array to return multiple values from a function.

    For example, you can declare a new tuple StringNumberType of string and number. It contains values where the first index is a string and the second index is a number.

    type StringNumberType = [string, number];
    

    Here’s an example function that returns a tuple array.

    function getData(): [string, number] {
      const data: [string, number] = ["hello", 42];
      return data;
    }
    console.log(getData());
    
  • Using Array to Return Values of the Same Type

    Functions can return multiple values wrapped in an array. Arrays store values of the same type. Since an array is an object in TypeScript, it must return Array<Number> or Array<String> values.

    Here’s an example function 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")];
    
  • Using Type Aliases

Functions can return multiple values encapsulated in an object created using type aliases syntax. You can return type alias names from both 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

Functions return a single variable of an object in TypeScript. They can return multiple values using the following approaches.

  • Array of the same type
  • Object using type aliases
  • Object using interfaces
  • Tuple