TypeScript ReturnType: How to use the ReturnType Utility Type?

by

What is ReturnType in TypeScript?

The ReturnType<Type>utility type retrieves the return type of a function. It allows you to extract the return type of a function.

This can be particularly useful for ensuring type safety and consistency across your codebase.

Syntax:

type OutcomeTypeVariable = ReturnType<Type>;

For further understanding let’s elaborate the parameters:

  • OutcomeTypeVariable:

This represents the variable or type alias where you intend to store the extracted return type.

Feel free to choose any suitable name for it.

  • ReturnType:

This refers to the utility type itself, which is used for extracting the return type of a function or constructor.

  • Type:

It specify the function or constructor type from which you want to extract the return type.
This parameter can be a function type, a constructor type, or a reference to either.

Example:

function getEmployee() {
  return { id: 1001, name: "Code" };
}

type Employee = ReturnType<typeof getEmployee>;

const employee: Employee = {
  id: 1001,
  name: "Code"
};

In this case, it retrieves the return type of the function getEmployee, which is { id: number; name: string }.

As you can see, Employee is a type that represents the return type of getEmployee, and employee is an object of type Employee.

The ReturnType utility type in TypeScript allows you to create a new type based on the return type of a function.

The output:

{ id: 1001, name: 'Code' }

Let’s dive into how it works:

Basic Usage:

For example, we have a function called getData that returns an object with phonenumber and name properties.

Below is the complete code that demonstrates the basic usage of the ReturnType utility type in TypeScript:

const getData = (name: string, phonenumber: number) => {
    return { phonenumber, name };
};

// Type is: { phonenumber: number, name: string }
type NewType = ReturnType<typeof getData>;

// Example usage:
const data: NewType = {
    phonenumber: 1234567890,
    name: "IT Source Code",
};

console.log(data); // Output: { phonenumber: 1234567890, name: 'IT Source Code' }

Output:

{ phonenumber: 1234567890, name: 'IT Source Code' }

Async Functions:

When using async functions, the return type will be wrapped in a Promise:

const getData = async (name: string, phonenumber: number): Promise<{ phonenumber: number; name: string }> => {
    return { phonenumber, name };
};

// Example usage:
async function main() {
    const result = await getData("It Source Code", 1234567890);
    console.log(result); // Output: { phonenumber: 1234567890, name: 'It Source Code' }
}

main();

Output:

 "phonenumber": 1234567890,
  "name": "It Source Code"
}

To unwrap the promise, use the Awaited type:

const getData = async (name: string, phonenumber: number): Promise<{ phonenumber: number; name: string }> => {
    return { phonenumber, name };
};

// Type is: { phonenumber: number; name: string }
type NewType = Awaited<ReturnType<typeof getData>>;

// Example usage:
async function main() {
    const result: NewType = await getData("It Source Code", 1234567890);
    console.log(result); // Output: { phonenumber: 1234567890, name: 'It Source Code' }
}

main();

Generic Functions:

The ReturnType utility type also works with generic functions:

const makeBox = <T>(value: T) => {
    return { value };
};
// Type is: { value: number }
type NewType = ReturnType<typeof makeBox<number>>;

You can omit the generic type argument to get an unknown type:

// Type is: { value: unknown }
type NewType = ReturnType<typeof makeBox>;

To avoid unknown types, set a default value for the generic argument:

const makeBox = <T extends number>(value: T) => {
    return { value };
};
// Type is: { value: number }
type NewType = ReturnType<typeof makeBox>;

Conclusion

The ReturnType utility type retrieves the return type of a function. It allows you to extract the return type of a function.

By leveraging ReturnType, you can ensure type safety and consistency in your codebase. Whether for regular functions, async functions returning Promises, or even generic functions, ReturnType proves versatile in defining and using precise types across TypeScript applications.

This utility type significantly enhances code readability and maintainability by accurately capturing function return types without manual annotations.

I hope this article has given you some insights and helped you understand the TypeScript Required.

If you have any questions or inquiries, please don’t hesitate to leave a comment below.

Leave a Comment