Error encountered in Typescript function wrapper: The provided data type of number[] cannot be assigned to [number]

Question

Error encountered in Typescript function wrapper: The provided data type of number[] cannot be assigned to [number]

Within this code snippet, the function requires two arguments: one for the function that needs to be wrapped and another for the argument producer.

function wrapper<K extends Array<any>, T>(fn: (...args: K) => T, pd: (...args: any) => K): T {
  return fn(...pd());
}

wrapper((id: number) => id, (id: number) => {
  return [id];
})

However, there seems to be an error in the declaration of the producer function:

Argument of type '(id: number) => number[]' is not assignable to parameter of type '(...args: any) => [id: number]'.
  Type 'number[]' is not assignable to type '[id: number]'.
    Target requires 1 element(s) but source may have fewer.(2345)

Is there a way to resolve this issue without altering the structure of the function? Thank you!

Here is the playground code

typescript

Answer 1

Answer №1

After extensive exploration, I have discovered some remedies:

Utilizing type inference:

function wrapper<K extends Function>(fn: K, pd: K extends (...args: infer P) => any ? (...args: any) => P : never): K extends (...args: any[]) => infer T ? T : never {
  return fn(...pd());
}

wrapper((id: number) => id, (id: number) => {
  return [id]
})

wrapper((id: string) => id, (id: string) => {
  return [id]
})

wrapper((id: bigint, id2: string) => id, (id: bigint, id2: string) => {
  return [id, id2]
})

Playground

Employing Ramda to enumerate all the arguments:

function wrapper<A1, K extends [A1], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<A1, A2, K extends [A1, A2], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<A1, A2, A3, K extends [A1, A2, A3], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<A1, A2, A3, A4, K extends [A1, A2, A3, A4], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<A1, A2, A3, A4, A5, K extends [A1, A2, A3, A4, A5], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<K extends Array<any>, T>(fn: (...args: K) => T, pd: (...args: any) => K): T {
  return fn(...pd());
}

wrapper((id: number, a: string) => id, (id: number) => {
  return [id, '12'];
})

Playground

If there are more strategies to consider, I invite further discussion!

Answer 2

After extensive exploration, I have discovered some remedies:

Utilizing type inference:

function wrapper<K extends Function>(fn: K, pd: K extends (...args: infer P) => any ? (...args: any) => P : never): K extends (...args: any[]) => infer T ? T : never {
  return fn(...pd());
}

wrapper((id: number) => id, (id: number) => {
  return [id]
})

wrapper((id: string) => id, (id: string) => {
  return [id]
})

wrapper((id: bigint, id2: string) => id, (id: bigint, id2: string) => {
  return [id, id2]
})

Playground

Employing Ramda to enumerate all the arguments:

function wrapper<A1, K extends [A1], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<A1, A2, K extends [A1, A2], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<A1, A2, A3, K extends [A1, A2, A3], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<A1, A2, A3, A4, K extends [A1, A2, A3, A4], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<A1, A2, A3, A4, A5, K extends [A1, A2, A3, A4, A5], T>(fn: (...args: K) => T, pd: (...args: any) => K): T;
function wrapper<K extends Array<any>, T>(fn: (...args: K) => T, pd: (...args: any) => K): T {
  return fn(...pd());
}

wrapper((id: number, a: string) => id, (id: number) => {
  return [id, '12'];
})

Playground

If there are more strategies to consider, I invite further discussion!

Error encountered in Typescript function wrapper: The provided data type of number[] cannot be assigned to [number]

Answer №1

Similar questions

TypeScript combined with Vue 3: Uncaught ReferenceError - variable has not been declared

ngPrime table column selection and data extraction

Custom Joi middleware in Express v4 is failing to pass the Request, Response, and Next objects

Ways to display all utilized typescript types within a project

Creating bonds between components in React

Expanding the range of colors in the palette leads to the error message: "Object is possibly 'undefined'. TS2532"

Angular 6's subscribe method is causing the UI to not update

Creating a fresh type in Typescript based on object keys that are already defined within an interface

Modify the selection in one dropdown menu based on the selection in another dropdown menu using Angular 8

Creating an external link in Angular with query parameters

essential elements for mapping an array using typescript

Error message: The module cannot be found by the compiler. This issue is resolved when using Visual Code and Definitely

"This error message states that the use of an import statement outside a module is not allowed

The journey of an Angular and NGXS store application culminates in a seamless loop of store updates

Manage sequential observables and await user input

How to Stop Browser Tooltip from Displaying HTML Tags within "innerHtml" in Angular 6

Utilizing a Function's Parameter Type in TypeScript: A Beginner's Guide

What is the connection between tsconfig.json and typings.json files?

Angular 2 interprets my JSON object as a function

Configuring TypeScript for Firefox to recognize specific types such as browser.storage