The rest parameter is required to be an array type when passing a tuple type

Question

The rest parameter is required to be an array type when passing a tuple type

I have a custom type that distinguishes between tuples (exact length) and arrays. I'm looking to leverage this distinction to automatically infer parameter types:

type ANumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;

type IsTuple<Type> = Type extends readonly unknown[] ? Type['length'] extends ANumber ? true : false : false;

function fn<T extends Record<keyof T, unknown>>() {
  return function withConfig(config: {
    [K in keyof T]: IsTuple<T[K]> extends true
      ? (...params: T[K]) => void
      : (param: T[K]) => void
  }) {};
}

fn<{ tupleType: [number, number], arrayType: number[] }>()({
  tupleType: (one, two) => {},
  arrayType: (arr) => {}
})

The function call executes successfully, and one, two, and arr are correctly inferred. However, the line ? (...params: T[K]) => void triggers an error:

A rest parameter must be of an array type

But wait... isn't a tuple technically an array type too? How can I guide the compiler to understand this distinction?

Playground

typescript

Answer 1

Answer №1

If you encounter a scenario where you have a generic type XXX that you believe can be assigned to type YYY, but the compiler does not recognize it (resulting in an error), you can usually resolve this by substituting XXX with Extract<XXX, YYY> utilizing the the Extract<T,U> utility type.

The compiler can comprehend that Extract<XXX, YYY> is assignable to both XXX and YYY. Later on, when the specific generic type is indicated, then Extract<XXX, YYY> will essentially equal whatever XXX resolves to, assuming your initial assertion that XXX could be assigned to YYY was accurate.

In your case, if you have T[K] which you know can be assigned to an array type such as readonly unknown[], even though the compiler does not recognize it (as it doesn't analyze higher-order types to understand that IsTuple<T> extends true indicates that T is an array). You can replace T[K] with

Extract<T[K], readonly unknown[]>

:

function fn<T extends Record<keyof T, unknown>>() {
  return function withConfig(config: {
    [K in keyof T]: IsTuple<T[K]> extends true
    ? (...params: Extract<T[K], readonly unknown[]>) => void  // okay
    : (param: T[K]) => void
  }) { };
}

This approach should work, and the rest of your code should operate in a similar manner as before.

Check out the Playground link for the code

Answer 2

If you encounter a scenario where you have a generic type XXX that you believe can be assigned to type YYY, but the compiler does not recognize it (resulting in an error), you can usually resolve this by substituting XXX with Extract<XXX, YYY> utilizing the the Extract<T,U> utility type.

The compiler can comprehend that Extract<XXX, YYY> is assignable to both XXX and YYY. Later on, when the specific generic type is indicated, then Extract<XXX, YYY> will essentially equal whatever XXX resolves to, assuming your initial assertion that XXX could be assigned to YYY was accurate.

In your case, if you have T[K] which you know can be assigned to an array type such as readonly unknown[], even though the compiler does not recognize it (as it doesn't analyze higher-order types to understand that IsTuple<T> extends true indicates that T is an array). You can replace T[K] with

Extract<T[K], readonly unknown[]>

:

function fn<T extends Record<keyof T, unknown>>() {
  return function withConfig(config: {
    [K in keyof T]: IsTuple<T[K]> extends true
    ? (...params: Extract<T[K], readonly unknown[]>) => void  // okay
    : (param: T[K]) => void
  }) { };
}

This approach should work, and the rest of your code should operate in a similar manner as before.

Check out the Playground link for the code

The rest parameter is required to be an array type when passing a tuple type

Answer №1

Similar questions

Send a variable from a next.js middleware to an API request

Oops! The formGroup function in Angular 5 requires an instance of a FormGroup

How can I convert select all to unselect all in ngmultiselect within the Angular framework?

flushMicrotasks does not function properly in conjunction with the image.onload event

How can I assign the output of a function to a variable within a class in Angular?

Extract an object array from the object and combine it into one cohesive unit

How to Utilize FormData in IE9 with Angular 5 and TypeScript Without Ajax or jQuery

Correcting Typing Errors in TypeScript

When I utilize a component to create forms, the React component does not refresh itself

Leveraging Angular 4-5's HttpClient for precise typing in HTTP requests

Redux Saga effect does not have a matching overload for this call

Removing redundant names from an array using Typescript

Strategies for defining a ReactNode with optional props

Deploying React with Firebase Cloud Functions in Typescript encounters deployment issues

What are the reasons behind memory leaks and decreased rendering speed when I exit and then reopen a React component (specifically Material-Table)?

The URL is reverted back to the previous address

Cache items in a list that require a callback function

Error message: Issue with TypeScript and cleave.js - 'rawValue' property is not found on type 'EventTarget & HTMLInputElement'

Is there a point in bundling NPM packages if they are ultimately going to be bundled by the project

Is there a method to automatically select or deselect a checkbox based on the incoming value in Angular?