Blending of Typescript Tuples

Question

Blending of Typescript Tuples

Is there a way to merge tuples in TypeScript such that one tuple is added at the end of another? Here is an example:

type MergeTuple<A extends any[], B extends any[]> = [...A, ...B];

I have tried the following approach:

type MergeTuple<A extends any[], B extends any[]> = [A[0], B[0]];

However, this method only works with a static count of items. For example:

MergeTuple<['a'], ['b']> // results in ['a', 'b']

But it does not work for cases like this:

MergeTuple<['a', 'b'], ['c']> // results in ['a', 'c'], whereas I expected ['a', 'b', 'c']

typescript typescript-generics

Answer 1

Answer №1

Combining Tuples in TypeScript currently requires using cumbersome workarounds.

Check out how one library tackles this issue

It's best to avoid doing this manually. Consider if you truly need it, and if so, simplify your task by utilizing a type library like typescript-tuple.

Answer 2

Combining Tuples in TypeScript currently requires using cumbersome workarounds.

Check out how one library tackles this issue

It's best to avoid doing this manually. Consider if you truly need it, and if so, simplify your task by utilizing a type library like typescript-tuple.

Answer 3

Answer №2

Are you experiencing issues with this solution?

type MergeTuples<
    X extends readonly any[],
    Y extends readonly any[]
> = [...X, ...Y];

If you require further assistance, you can utilize this sandbox.

Answer 4

Are you experiencing issues with this solution?

type MergeTuples<
    X extends readonly any[],
    Y extends readonly any[]
> = [...X, ...Y];

If you require further assistance, you can utilize this sandbox.

Answer 5

Answer №3

By transforming multiple tuple fragments into array form, one can utilize a type structure that accommodates an indefinite number of tuple fragments:

type Flattened<Fragments extends any[][]> = 
    Fragments extends 
    [
        infer CurrentTupleFragment extends any[], 
        ...infer RemainingTupleFragments extends any[][]
    ] ? 
    [
        ...CurrentTupleFragment,
        ...Flattened<RemainingTupleFragments>
    ] : 
    [];

type flat = Flattened<[["a", "b"], ["c"], ["d", "e", "f"]>; //["a", "b", "c", "d", "e", "f"]

This process involves recursively breaking down the array into its initial element CurrentTupleFragment and the remaining elements to be processed recursively until reaching the end of the array. Subsequently, it returns an empty array up the recursion hierarchy. Upon returning, the CurrentTupleFragment is spread out and added before the already spread tuple fragments from the recursion, which also need to be spread out again to prevent excessive nesting of Arrays (experiment by removing the ... before the recursive Flatten to observe the outcome).

Answer 6

By transforming multiple tuple fragments into array form, one can utilize a type structure that accommodates an indefinite number of tuple fragments:

type Flattened<Fragments extends any[][]> = 
    Fragments extends 
    [
        infer CurrentTupleFragment extends any[], 
        ...infer RemainingTupleFragments extends any[][]
    ] ? 
    [
        ...CurrentTupleFragment,
        ...Flattened<RemainingTupleFragments>
    ] : 
    [];

type flat = Flattened<[["a", "b"], ["c"], ["d", "e", "f"]>; //["a", "b", "c", "d", "e", "f"]

This process involves recursively breaking down the array into its initial element CurrentTupleFragment and the remaining elements to be processed recursively until reaching the end of the array. Subsequently, it returns an empty array up the recursion hierarchy. Upon returning, the CurrentTupleFragment is spread out and added before the already spread tuple fragments from the recursion, which also need to be spread out again to prevent excessive nesting of Arrays (experiment by removing the ... before the recursive Flatten to observe the outcome).

Blending of Typescript Tuples

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason for the lack of overlap between types in an enum?

Angular version 6 and its routing functionality

Extracting the name of a track from the /r/listenToThis subreddit for an IFTTT automation script

utilizing tabview for component replacement

What is the process of encapsulating a callback function within another callback function and invoking it from there?

Exploring the usage of asynchronous providers in NestJS

What are the steps to locally test my custom UI library package built with tsdx in a React.js project

Tips for selecting specific types from a list using generic types in TypeScript

Ways to avoid using a specific type in TypeScript

A guide to sending epoch time data to a backend API using the owl-date-module in Angular

Utilizing Mongoose Typescript 2 Schema with fields referencing one another in different schemas

What methods can be used to display data using TypeScript's Optional Chaining feature?

Ionic3 attempted lazy loading, however it failed due to the absence of any component factory

Leveraging parameters within a sequence of object properties

Guide on Implementing a Function Post-Rendering in Angular 2+

Is it possible to enter NaN in Vue3?

Encountered Error: Unknown property 'createStringLiteral', causing TypeError in the Broken Storyshots. This issue is happening while using version ^8.3.0 of jest-preset-angular

Property undefined with all alert points filled

Next.js 14 useEffect firing twice upon page load

When embedding HTML inside an Angular 2 component, it does not render properly