Is there a way to retrieve the ReturnType of functions based on a parameter list in Typescript?

Question

Is there a way to retrieve the ReturnType of functions based on a parameter list in Typescript?

I am struggling with defining a main function myMainFunction() that accepts a list of functions with different return types as parameters.

My goal is to have the return type of myMainFunction be determined by the return types of the functions passed to it as parameters. However, I am facing difficulties in implementing this.

Below is my current approach, which does not seem to be working as expected:

const funcA = async (): string => "Hello";
const funcB = async (): {name: string, age: number} => ({ name: "Jane", age: 123 });

const myMainFunction = async <F extends () => ReturnType<F>>(...functions: F[]): Promise<ReturnType<F>[]> => {
  const res = await Promise.all(functions.map((fn) => fn()));
  return res;
};

// This does not provide the expected result, as values has a type of Promise<string>[]
// I am anticipating values to be of type Promise<[string, {first: string, age: number }]>
const values = await myMainFunction(funcA, funcB);

The issue with the above code is that the variable values is of type Promise<string>[]. It seems to only consider the return type of the first function in the parameters.

My expectation is for values to have a type of

Promise<[string, {first: string, age: number }]>

, representing the return types of funcA() and funcB().

How can I achieve the desired outcome?

javascript typescript typescript-typings

Answer 1

Answer №1

In Typescript, there is a unique type for Array types called T[number], allowing us to accomplish the following:

const funcA = async (): Promise<string> => "Hello";
const funcB = async (): Promise<{name: string, age: number}> => ({ name: "Jane", age: 123 });

const myMainFunction = async <T extends any[number][]> (...functions: T) => {
  const res = await Promise.all(functions);
  return res;
};

async function test() {
    const values = await myMainFunction(funcA(), funcB());
    // values[0]  string
    // values[1]  {name: string, age: number}
    console.log(values[1].age);
}

When passing functions, the map function loses its type. However, by using the as keyword, we can reassign them back. With the help of @T.J.Crowder's MapToUnpromisedReturnType type, we can achieve this:

const funcA = async (): Promise<string> => "Hello";
const funcB = async (): Promise<{name: string, age: number}> => ({ name: "Jane", age: 123 });

type MapToUnpromisedReturnType<T extends Array<any>> = {
    [K in keyof T]: Awaited<ReturnType<T[K]>>;
};

const myMainFunction = async <T extends (() => Promise<any[number]>)[]> (...functions: T) => {
  const mapped = await functions.map(f => f());
  return mapped as MapToUnpromisedReturnType<T>;
};

async function test() {
    const values = await myMainFunction(funcA, funcB);
    // values[0]  string
    // values[1]  {name: string, age: number}
    console.log(values[1].age);
}

Here is a slightly refactored version without the helper:

const myMainFunction = async <T extends (() => Promise<any[number]>)[]> (...functions: T) => {
  return functions.map(f => f()) as {[K in keyof T]: Awaited<ReturnType<T[K]>>};
};

Answer 2

In Typescript, there is a unique type for Array types called T[number], allowing us to accomplish the following:

const funcA = async (): Promise<string> => "Hello";
const funcB = async (): Promise<{name: string, age: number}> => ({ name: "Jane", age: 123 });

const myMainFunction = async <T extends any[number][]> (...functions: T) => {
  const res = await Promise.all(functions);
  return res;
};

async function test() {
    const values = await myMainFunction(funcA(), funcB());
    // values[0]  string
    // values[1]  {name: string, age: number}
    console.log(values[1].age);
}

When passing functions, the map function loses its type. However, by using the as keyword, we can reassign them back. With the help of @T.J.Crowder's MapToUnpromisedReturnType type, we can achieve this:

const funcA = async (): Promise<string> => "Hello";
const funcB = async (): Promise<{name: string, age: number}> => ({ name: "Jane", age: 123 });

type MapToUnpromisedReturnType<T extends Array<any>> = {
    [K in keyof T]: Awaited<ReturnType<T[K]>>;
};

const myMainFunction = async <T extends (() => Promise<any[number]>)[]> (...functions: T) => {
  const mapped = await functions.map(f => f());
  return mapped as MapToUnpromisedReturnType<T>;
};

async function test() {
    const values = await myMainFunction(funcA, funcB);
    // values[0]  string
    // values[1]  {name: string, age: number}
    console.log(values[1].age);
}

Here is a slightly refactored version without the helper:

const myMainFunction = async <T extends (() => Promise<any[number]>)[]> (...functions: T) => {
  return functions.map(f => f()) as {[K in keyof T]: Awaited<ReturnType<T[K]>>};
};

Answer 3

Answer №2

An outdated and unclean version - not recommended for use.

type ResolveFunction<T extends (...args: any) => any> = Awaited<ReturnType<T>>;
type ResolveFunctions<T extends [...((...args: any) => any)[]]> = T extends [
  infer Head,
  ...infer Tail
]
  ? Head extends (...args: any) => any
    ? Tail extends ((...args: any) => any)[]
      ? [ResolveFunction<Head>, ...ResolveFunctions<Tail>]
      : []
    : []
  : [];

const myMainFunction = async <T extends [...((...args: any) => any)[]]>(
  ...functions: T
): Promise<ResolveFunctions<T>> => {
  const res = await Promise.all(functions.map((fn) => fn()));
  return res as any;
};

A newer version inspired by another solution.

type AsyncFunction = (...args: any) => Promise<any>;
type ResolveFunction<T extends AsyncFunction> = Awaited<ReturnType<T>>;
type ResolveFunctions<T extends AsyncFunction[]> = {
  [K in keyof T]: ResolveFunction<T[K]>;
};

const myMainFunction = async <T extends AsyncFunction[]>(
  ...functions: T
): Promise<ResolveFunctions<T>> => {
  const res = await Promise.all(functions.map((fn) => fn()));
  return res as any;
};

Answer 4

An outdated and unclean version - not recommended for use.

type ResolveFunction<T extends (...args: any) => any> = Awaited<ReturnType<T>>;
type ResolveFunctions<T extends [...((...args: any) => any)[]]> = T extends [
  infer Head,
  ...infer Tail
]
  ? Head extends (...args: any) => any
    ? Tail extends ((...args: any) => any)[]
      ? [ResolveFunction<Head>, ...ResolveFunctions<Tail>]
      : []
    : []
  : [];

const myMainFunction = async <T extends [...((...args: any) => any)[]]>(
  ...functions: T
): Promise<ResolveFunctions<T>> => {
  const res = await Promise.all(functions.map((fn) => fn()));
  return res as any;
};

A newer version inspired by another solution.

type AsyncFunction = (...args: any) => Promise<any>;
type ResolveFunction<T extends AsyncFunction> = Awaited<ReturnType<T>>;
type ResolveFunctions<T extends AsyncFunction[]> = {
  [K in keyof T]: ResolveFunction<T[K]>;
};

const myMainFunction = async <T extends AsyncFunction[]>(
  ...functions: T
): Promise<ResolveFunctions<T>> => {
  const res = await Promise.all(functions.map((fn) => fn()));
  return res as any;
};

Is there a way to retrieve the ReturnType of functions based on a parameter list in Typescript?

Answer №1

Answer №2

An outdated and unclean version - not recommended for use.

A newer version inspired by another solution.

Similar questions

Unusual conduct when employing basic directive for validation messages

Communicating between PHP chat client and server

Modify the website address and show the dynamic content using AJAX

Arranging data in a table using PHP

Dragging the world map in D3 causes it to appear jumpy and erratic

Automated Menu Selection using Selenium

Developing an Easy-to-Use PDF Popup Interface

Stop HTML audio playback upon clicking on a specific element

Guide on adding HTML to a specific div element in jQuery by utilizing the keyword "(this)"

From creating a simple jQuery fiddle, let's delve into the world

A guide on extracting text enclosed by <a> and </a> tags using regular expressions

Encountering an ENOENT error in the CodeSandbox CI environment, whereas this issue does not arise in GitHub

Module fails to load in the proper sequence

Having trouble with uploading an image in Laravel using a modal?

Issue with iOS 10: Changes to class not reflected in CSS/styles

What is your strategy for managing errors when utilizing xui's xhr functionality?

Can you show me the steps for linking the next method of an EventEmitter?

Connect the keys from one enum to either keys or values in another enum

Display elements exclusively when the class XY is in an active state using JavaScript

What causes React Router to render the Navigation to the <Home/> component when the userData is still available, but redirects to "/login" otherwise?