TypeScript ReturnType <Type> Utility Type

In this article, we will learn about ReturnType<Type> Utility Type in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. In TypeScript, the ReturnType<Type> utility type is used to extract the return type of a given function type or constructor type. It allows you to infer the type that a function will return based on its signature. This can be useful when you want to capture the return type of a function for later use or when you need to work with functions generically.

Syntax

type ResultTypeVariable = ReturnType<Type>;

Parameters

• ResultTypeVariable: This is the name you choose for the variable or type alias where you want to store the extracted return type. You can name it whatever you like.
• ReturnType: This is the utility type itself, used to extract the return type of a function or constructor.
• Type: This is the parameter where you specify the function or constructor type from which you want to extract the return type. It can be a function type, a constructor type, or a reference to a function or constructor.

Example 1: In this example, We have a great function that takes a name parameter of a type string and returns a string. We use the ReturnType<Type> utility type to capture the return type of the greet function and assign it to the GreetReturnType type. We create a variable greeting of type GreetReturnType and assign it a string value. TypeScript ensures that the assigned value matches the expected return type of the greet function. When we log a greeting, it outputs the string that matches the return type of the greet function.

Javascript

// Define a function that returns a string
function greet(name: string): string {
    return `Hello, ${name}!`;
}

// Use ReturnType<Type> to capture
// the return type of the function
type GreetReturnType =
    ReturnType<typeof greet>;

// Create a variable with the return type
const greeting: GreetReturnType =
    "Hello, GeeksforGeeks!";

// Outputs: "Hello, GeeksforGeeks!"
console.log(greeting);

Output

Hello, GeeksforGeeks!

Example 2: In this example, We have a multiply function that takes two parameters and returns their product as a number.  We use ReturnType<typeof multiply> to extract the return type of the multiply function, which is number. The MultiplyFunctionReturnType type is assigned the return type of the multiply function. We then call the multiply function with arguments 3 and 4 and assign the result to a variable result. TypeScript infers that the result must be of type number because it matches the return type of the multiply function.

Javascript

function multiply(a: number, b: number): number {
    return a * b;
}

type MultiplyFunctionReturnType =
    ReturnType<typeof multiply>;

// Valid, result is of type number
const result: MultiplyFunctionReturnType =
    multiply(3, 4);

console.log(result)

Output

12

Reference: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype