Supply type Parameters<T> to a function with a variable number of arguments

Question

Supply type Parameters<T> to a function with a variable number of arguments

I am interested in utilizing the following function:

declare function foo(...args: any): Promise<string>;

The function foo is a pre-defined javascript 3rd party API call that can accept a wide range of parameters.

The objective is to present a collection of potential function types to be passed into a wrapper function, which will help enforce the parameter types of this function. This generic wrapper function will take a type parameter representing another function and use its parameters and return type to determine the parameters and return type of the actual function invocation.

async function fooWithType<T extends (...args: any) => string>(args: Parameters<T>): Promise<string> {
    return await foo(...args)
}

Below is an example of one potential function type definition and how it could aid in invoking this 3rd party function through the wrapper function:

type funType = (a: string, b: boolean, c: number) => void;

fooWithType<funType>(["", true, 4])

However, I encountered an error indicating that I cannot use the spread operator on args?: Parameters<T>.

Type 'Parameters<T>' must have a '[Symbol.iterator]()' method that returns an iterator.

Why does the spread operator not work as expected here? I assumed I would be able to spread the tuple argument into the vararg parameter of the foo function.

Playground link

typescript

Answer 1

Answer №1

It appears that there is a mistake in your second function definition where you are missing brackets. When using ...args as an array, it should be defined as any[], not just any.

Try it out on the playground.

declare function foo(...args: any): Promise<any>;

// Corrected
async function fooWithType<T extends (...args: any[]) => any>(args: Parameters<T>): Promise<ReturnType<T>> {
    return await foo(...args)
}

type funType = (a: string, b: boolean, c: number) => void;

fooWithType<<funType>(["", true, 4])
// ^? 
// function fooWithType<funType>(args: [a: string, b: boolean, c: number]): Promise<void>

Edit:

If you want to pass an array as a "single" parameter, you have two options:

Adjust the funType type to accept a tuple (fixed-size array) instead of separate arguments
Use spread syntax when calling the function with an array

declare function foo(...args: any): Promise<any>;

async function fooWithType<T extends (...args: any[]) => any>(...args: Parameters<T>): Promise<ReturnType<T>> {
    return await foo(...args)
}

type funType = (a: string, b: boolean, c: number) => void;

fooWithType<<funType>(...["", true, 4]) // Spread tuple elements as separate parameters
// ^?
// function fooWithType<funType>(a: string, b: boolean, c: number): Promise<void>

Answer 2

It appears that there is a mistake in your second function definition where you are missing brackets. When using ...args as an array, it should be defined as any[], not just any.

Try it out on the playground.

declare function foo(...args: any): Promise<any>;

// Corrected
async function fooWithType<T extends (...args: any[]) => any>(args: Parameters<T>): Promise<ReturnType<T>> {
    return await foo(...args)
}

type funType = (a: string, b: boolean, c: number) => void;

fooWithType<<funType>(["", true, 4])
// ^? 
// function fooWithType<funType>(args: [a: string, b: boolean, c: number]): Promise<void>

Edit:

If you want to pass an array as a "single" parameter, you have two options:

Adjust the funType type to accept a tuple (fixed-size array) instead of separate arguments
Use spread syntax when calling the function with an array

declare function foo(...args: any): Promise<any>;

async function fooWithType<T extends (...args: any[]) => any>(...args: Parameters<T>): Promise<ReturnType<T>> {
    return await foo(...args)
}

type funType = (a: string, b: boolean, c: number) => void;

fooWithType<<funType>(...["", true, 4]) // Spread tuple elements as separate parameters
// ^?
// function fooWithType<funType>(a: string, b: boolean, c: number): Promise<void>

Answer 3

Answer №2

A well-known issue in TypeScript is that the Parameters<T> for a generic type T constrained to (...args: any) => any is not recognized as spreadable. Check out more details on microsoft/TypeScript#36874.

An alternative solution would be to use the variadic tuple type mentioned in the TypeScript 4.0 release notes: [...Parameters<T>]

async function fooWithType<T extends (...args: any) => any>(
    args: [...Parameters<T>]
): Promise<string> {
    return await foo(...args);
}

Another workaround is modifying the constraint of T to use any[] instead of any for the argument type:

async function fooWithType<T extends (...args: any[]) => any>(
    args: Parameters<T>
): Promise<string> {
    return await foo(...args);
}

Given the loose typing of foo(), you could go with using a type assertion inside the function to suppress the error:

async function fooWithType<T extends (...args: any) => any>(
    args: Parameters<T>
): Promise<string> {
    return await foo(...args as any);
}

For further experimentation, you can check out this code on the TypeScript playground: Playground link

Answer 4

A well-known issue in TypeScript is that the Parameters<T> for a generic type T constrained to (...args: any) => any is not recognized as spreadable. Check out more details on microsoft/TypeScript#36874.

An alternative solution would be to use the variadic tuple type mentioned in the TypeScript 4.0 release notes: [...Parameters<T>]

async function fooWithType<T extends (...args: any) => any>(
    args: [...Parameters<T>]
): Promise<string> {
    return await foo(...args);
}

Another workaround is modifying the constraint of T to use any[] instead of any for the argument type:

async function fooWithType<T extends (...args: any[]) => any>(
    args: Parameters<T>
): Promise<string> {
    return await foo(...args);
}

Given the loose typing of foo(), you could go with using a type assertion inside the function to suppress the error:

async function fooWithType<T extends (...args: any) => any>(
    args: Parameters<T>
): Promise<string> {
    return await foo(...args as any);
}

For further experimentation, you can check out this code on the TypeScript playground: Playground link

Supply type Parameters<T> to a function with a variable number of arguments

Answer №1

Answer №2

Similar questions

Navigating Through Angular Components

Animating Angular ng-template on open/close state status

Storing application state using rxjs observables in an Angular application

Using Svelte with Vite: Unable to import the Writable<T> interface for writable store in TypeScript

Using the parameter value as a property name in the return type of a function in TypeScript: a guide

Dealing with the endless looping problem in Next.js caused by useEffect

Where's the tsconfig.json for Firebase Emulators?

Yarn Plug'n'Play was unable to locate the module during the next build

What is the solution to the error message "Unable to assign property of undefined"?

Create a global variable by importing an external module in TypeScript

Error in Express Session: Property 'signin' is not found in type 'Session & Partial<SessionData>'. Code: 2339

Troubleshooting: Vue.js component events not being detected in TypeScript

What is the best way to interpret a line break within a string variable in TypeScript?

Javascript Library Issue: "Implicitly Declared Type 'Any' Error"

Struggling to make Cypress react unit testing run smoothly in a ReactBoilerplate repository

Is there a way to dynamically retrieve a JSON element in Typescript?

Tips for managing numerous HTTP requests in Angular 6

Exploring Typescript keyof in Storybook's User Interface customizations

Navigating through the concept of passing objects by reference in child components of Angular 2+

Angular is used to call a function that captures a specific div and then waits for the capture to be completed before