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

Error encountered in azure devops preventing successful execution: "npm ERR! code ELIFECYCLE"

Having trouble selecting all checkboxes in the tree using angular2-tree when it first initializes

How to efficiently update a child component in React using UseState and establish a connection back to the parent component

Establishing a Next.js API endpoint at the root level

What is the best approach to incorporate Column Reordering in react-data-grid?

Manipulating array objects by replacing values in Typescript

What causes parameters to be undefined when making a DELETE request in my Next.js application running on version 14.1.4?

Instructions for designing a Loading Indicator or Progress Bar within the App Directory of NextJS

Customize Monaco Editor: Implementing Read-Only Sections

React-table fails to show newly updated data

ts-node: The colon symbol was not expected in this context

Using Typescript for AngularJS bindings with ng.IComponentController

Mastering the mapping function in ReactJs for a Map<string, boolean> data structure

Angular rxjs Distinctions

How can you define the types of function arguments when destructuring arguments in TypeScript?

Running a Redux Thunk action from within a TypeScript environment, beyond the confines of a React component

Error: The selected module is not a valid top-level option

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

The subscribe method in Angular TS may be marked as deprecated, but worry not as it is still

This error occurred: "Property 'release' cannot be read because it is undefined."