Using Typescript to dynamically set the length of a tuple or array based on the arguments passed to a function

Question

Using Typescript to dynamically set the length of a tuple or array based on the arguments passed to a function

Here is some TypeScript code to consider:

function concatTuples<T>(first: [...T[]], second: [...T[]]): [...T[]] {
  return [...first, ...second];
}

const result = concatTuples([0, 1], [2, 3]);

This function concatenates tuples. The current challenge is that the length of the returned tuple is not known beforehand.

The current type of result: number[].

I would like the type to be: [number, number, number, number].

It is desired that the size of the returned tuple/array is dynamically determined based on the function's arguments.

Is there a way to achieve this? After reviewing the documentation, no direct solution was found.

arrays typescript types tuples

Answer 1

Answer №1

Your implementation doesn't actually utilize tuple types in the code provided; the type parameter T only represents the element type, resulting in both arrays being reduced to the unordered and arbitrarily-long array type T[]. Essentially, your code is just accepting two arrays of type T[] and returning another one.

To cater to your specific use case, incorporating variadic tuple types is necessary. This entails utilizing two separate type parameters for each array type (as opposed to their elements). The function should look like this:

function concatTuples<T extends any[], U extends any[]>(
  first: [...T], second: [...U]
): [...T, ...U] {
    return [...first, ...second];
}

With this update, the functionality aligns with your original intentions:

const result = concatTuples([0, 1], [2, 3]);
// const result: [number, number, number, number]

Playground link to code

Answer 2

Your implementation doesn't actually utilize tuple types in the code provided; the type parameter T only represents the element type, resulting in both arrays being reduced to the unordered and arbitrarily-long array type T[]. Essentially, your code is just accepting two arrays of type T[] and returning another one.

To cater to your specific use case, incorporating variadic tuple types is necessary. This entails utilizing two separate type parameters for each array type (as opposed to their elements). The function should look like this:

function concatTuples<T extends any[], U extends any[]>(
  first: [...T], second: [...U]
): [...T, ...U] {
    return [...first, ...second];
}

With this update, the functionality aligns with your original intentions:

const result = concatTuples([0, 1], [2, 3]);
// const result: [number, number, number, number]

Playground link to code

Using Typescript to dynamically set the length of a tuple or array based on the arguments passed to a function

Answer №1

Similar questions

Arranging an array based on various conditions and criteria

Converting PHP key-value pairs into nested arrays: [key, value]

React function failing to utilize the latest state

Tips for navigating to a different tab within a component in Angular 12

The automatic type inference in Typescript is faulty

The static side of the class `typeof _Readable` is erroneously extending the static side of the base class `typeof Readable`

Typescript eliminates the need for unnecessary source code compilation

Generate all conceivable combinations of elements found in the array

Using Ionic2, include NavController into Injectable Service

Can a single file in NextJS 13 contain both client and server components?

Deriving the type of a generic parameter from another generic parameter in TypeScript

What is the best method to determine the variance between two arrays in PHP?

Experiencing Difficulty Generating a Signed Request in JavaScript for AWS in Order to Access AWS Managed Prometheus

Utilizing the compilerOptions: paths setting does not yield desired results when working with Node

Using TypeScript with AWS Lambda: To package imports or not to package? Alternatively: Error in Runtime.ImportModule: Module '@aws-sdk/...' not found

PHP struggles to parse a JSON array

Encountered an error while trying to load config.ts file because of an issue

The function does not properly handle the strcmp inside the if statement

What is preventing me from assigning to a class variable within a $http success handler?

Receive a list of articles based on your subscription status