Exploring Variadic Tuples in Typescript

Question

Exploring Variadic Tuples in Typescript

UPDATE: TypeScript 4.1 introduced this feature as mentioned by @jcalz.

I am attempting to create a generic type that can traverse a tuple. Initially, I tried using recursion but encountered an error

Type alias 'YourOperator' circularly references itself.

. Here is a basic example of my initial approach:

type VariadicAnd<T extends any[]> = T extends [infer Head, ...infer Tail] ? Head & VariadicAnd<Tail> : unknown

In my specific scenario, I also wanted to apply a transformation to the `Head` by encapsulating it within another generic type. For instance:

type SimpleTransform<T> = { wrapped: T }
type VariadicAndWithTransform<T extends any[]> = T extends [infer Head, ...infer Tail]
  ? SimpleTransform<Head> & VariadicAndWithTransform<Tail>
  : unknown;

Interestingly, while IntelliSense interprets the types correctly, the TypeScript compiler rejects it. I am considering alternative approaches or trying to find a workaround for my recursive implementation.

javascript typescript recursion tuples typescript-generics

Answer 1

Answer №1

In TypeScript 4.1 and above, your code works perfectly due to the support for recursive conditional types.

type VariadicAndWithTransform<T extends any[]> = T extends [infer F, ...infer R]
  ? SimpleTransform<F> & VariadicAndWithTransform<R>
  : unknown; // no error

type Works = VariadicAndWithTransform<[{ a: 1 }, { b: 2 }, { c: 3 }]>;
/* type Works = SimpleTransform<{
    a: 1;
}> & SimpleTransform<{
    b: 2;
}> & SimpleTransform<{
    c: 3;
}> */

Prior to version 4.1, there were unofficial workarounds to allow types. To utilize recursive conditional types, make sure to update your TypeScript version.

For the desired type functionality without recursion, you can use a more efficient approach that minimizes strain on the compiler:

type VariadicAndWithTransform<T extends any[]> = {
  [K in keyof T]: (v: SimpleTransform<T[K]>) => void
}[number] extends ((v: infer I) => void) ? I : never

This method leverages inference within conditional types from unions in contravariant positions. It simplifies the process for both the compiler and the developer.

By using this non-recursive version, you can handle longer tuples without encountering errors:

type StillWorks = VariadicAndWithTransform<TwentySeven>;
/* type StillWorks = { wrapped: {}; } */

Check out this Playground link demonstrates how it interacts with various examples.

Answer 2

In TypeScript 4.1 and above, your code works perfectly due to the support for recursive conditional types.

type VariadicAndWithTransform<T extends any[]> = T extends [infer F, ...infer R]
  ? SimpleTransform<F> & VariadicAndWithTransform<R>
  : unknown; // no error

type Works = VariadicAndWithTransform<[{ a: 1 }, { b: 2 }, { c: 3 }]>;
/* type Works = SimpleTransform<{
    a: 1;
}> & SimpleTransform<{
    b: 2;
}> & SimpleTransform<{
    c: 3;
}> */

Prior to version 4.1, there were unofficial workarounds to allow types. To utilize recursive conditional types, make sure to update your TypeScript version.

For the desired type functionality without recursion, you can use a more efficient approach that minimizes strain on the compiler:

type VariadicAndWithTransform<T extends any[]> = {
  [K in keyof T]: (v: SimpleTransform<T[K]>) => void
}[number] extends ((v: infer I) => void) ? I : never

This method leverages inference within conditional types from unions in contravariant positions. It simplifies the process for both the compiler and the developer.

By using this non-recursive version, you can handle longer tuples without encountering errors:

type StillWorks = VariadicAndWithTransform<TwentySeven>;
/* type StillWorks = { wrapped: {}; } */

Check out this Playground link demonstrates how it interacts with various examples.

Exploring Variadic Tuples in Typescript

Answer №1

Similar questions

What steps should I take to successfully install using npm if I keep encountering the same error?

Ways to resolve the issue: 'Error: Tether (http://github.hubspot.com/tether/) is needed for Bootstrap tooltips'

Error: The property 'getClientRects' cannot be read because it is null

Having difficulty entering text into a "Search Input Field" that is a react component in testcafe

JavaScript: choosing between assigning to the callback function or using an anonymous function

Problem with Resetting State in Cordova/AngularJS

Preventing default behavior in Firefox using jQuery with event.preventDefault()

Error message: Unable to interact with element due to visibility issue

Ways to run a javascript command just a single time

Utilizing regular expressions for querying MongoDB

Encountering this error for the first time - Uncaught Error displayed in the Console

Is it necessary to delay until the entire page finishes loading in Selenium 3?

What methods does YepNope.js offer for assigning dynamic names to scripts?

HTML Form Validation - Conditional implementation based on radio button choice

Enable/disable specific dates in datepicker depending on dropdown selection

Utilize Javascript to locate the image width and assign it to the wrapper divs in WordPress

Performing a Search Operation using AJAX with Elasticsearch

Tips for adjusting text color in a paragraph based on its content

Each Jest test file should have a specified window.location

Developing ES6 modules in C++ using Node.js