Creating an array that contains a combination of tuples

Question

Creating an array that contains a combination of tuples

I am currently working on converting a function to TypeScript that involves an Array of mixed type tuples, similar to Promise.all. I am struggling to set up the definitions for this particular function.

export type Type<T> = [T, boolean];

function fn<T1, T2>(list: [Type<T1>, Type<T2>]): [T1, T2] {
    return list.map(([value]) => value);
}

fn([
    ['string', true],
    [123, false],
    // More items
]);
// Output: [ 'string', 123 ]

The Promise.all method has different options such as:

all<T1, T2, T3>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>]): Promise<[T1, T2, T3]>;
all<T1, T2>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>]): Promise<[T1, T2]>;
all<T>(values: readonly (T | PromiseLike<T>)[]): Promise<T[]>;

I am wondering if there is a more efficient way in TypeScript to handle arrays without explicitly defining all possible lengths?

typescript

Answer 1

Answer №1

If you want the function's output to be of a specific array/tuple type T, consider defining the parameter list as a mapped array/tuple type. This means that for each numeric index I in T, the element at that index should be changed to Type<T[I]>. By using inference from mapped types, the compiler can determine the type T based on the structure of list.

One possible implementation is:

export type Type<T> = readonly [T, boolean];

function fn<T extends readonly any[]>(
  list: readonly [...{ [I in keyof T]: Type<T[I]> }]
): T {
    return list.map(([value]) => value) as any;
}

Key points to note:

All array types are defined as readonly since they are less restrictive than mutable arrays. Mutable arrays can be assigned to read-only arrays but not vice versa. It's unlikely that you want to disallow read-only inputs, especially considering features like const assertions.
The list parameter is of a variadic tuple type [...XXX], hinting to the compiler that it should interpret list as a tuple and maintain the order of elements.
A type assertion to any is used within the implementation of fn() due to limitations in type verification by the compiler. Extra caution must be taken to ensure type safety when using such assertions.

To test the function:

const result = fn([
    ['string', true],
    [123, false],
    [new Date(), true]
]);
// const result: [string, number, Date]

If you prefer narrower literal types, use a const assertion:

const resultNarrower = fn([
    ['string', true],
    [123, false],
    [new Date(), true]
] as const);
// const resultNarrower: ["string", 123, Date]

The readonly changes enable this more specific output type ["string", 123, Date].

Playground link to code

Answer 2

If you want the function's output to be of a specific array/tuple type T, consider defining the parameter list as a mapped array/tuple type. This means that for each numeric index I in T, the element at that index should be changed to Type<T[I]>. By using inference from mapped types, the compiler can determine the type T based on the structure of list.

One possible implementation is:

export type Type<T> = readonly [T, boolean];

function fn<T extends readonly any[]>(
  list: readonly [...{ [I in keyof T]: Type<T[I]> }]
): T {
    return list.map(([value]) => value) as any;
}

Key points to note:

All array types are defined as readonly since they are less restrictive than mutable arrays. Mutable arrays can be assigned to read-only arrays but not vice versa. It's unlikely that you want to disallow read-only inputs, especially considering features like const assertions.
The list parameter is of a variadic tuple type [...XXX], hinting to the compiler that it should interpret list as a tuple and maintain the order of elements.
A type assertion to any is used within the implementation of fn() due to limitations in type verification by the compiler. Extra caution must be taken to ensure type safety when using such assertions.

To test the function:

const result = fn([
    ['string', true],
    [123, false],
    [new Date(), true]
]);
// const result: [string, number, Date]

If you prefer narrower literal types, use a const assertion:

const resultNarrower = fn([
    ['string', true],
    [123, false],
    [new Date(), true]
] as const);
// const resultNarrower: ["string", 123, Date]

The readonly changes enable this more specific output type ["string", 123, Date].

Playground link to code

Answer 3

Answer №2

Check out the following solution for your query:


type FirstValue<T> = T extends readonly [infer First, infer Second] ? First : never;
type MappingFunction<T> = FirstValue<T>;

type MappedArray<
    ArrayType extends ReadonlyArray<unknown>,
    ResultType extends ReadonlyArray<unknown> = readonly []
    > = ArrayType extends readonly []
    ? readonly [1]
    : ArrayType extends readonly [infer X]
    ? readonly [...ResultType, MappingFunction<X>]
    : ArrayType extends readonly [infer Start, ...infer Rest]
    ? MappedArray<readonly [...Rest], readonly [...ResultType, MappingFunction<Start>]>
    : Readonly<ResultType>;

type FinalOutput = MappedArray<[['abc', true], [456, false]]>; // ['abc', 456]

export type TypeDefinition<T> = readonly [T, boolean];

function customFunction<T extends ReadonlyArray<readonly [unknown, boolean]>>(inputList: T) {
    // Type casting is required in this section
    return inputList.map(([item]) => item) as unknown as MappedArray<T>
}

const myArr = [
    ['example', true],
    [789, false],
    // Add more items here if needed
] as const;

const finalResult = customFunction(myArr); // readonly ['example', 789]

Answer 4

Check out the following solution for your query:


type FirstValue<T> = T extends readonly [infer First, infer Second] ? First : never;
type MappingFunction<T> = FirstValue<T>;

type MappedArray<
    ArrayType extends ReadonlyArray<unknown>,
    ResultType extends ReadonlyArray<unknown> = readonly []
    > = ArrayType extends readonly []
    ? readonly [1]
    : ArrayType extends readonly [infer X]
    ? readonly [...ResultType, MappingFunction<X>]
    : ArrayType extends readonly [infer Start, ...infer Rest]
    ? MappedArray<readonly [...Rest], readonly [...ResultType, MappingFunction<Start>]>
    : Readonly<ResultType>;

type FinalOutput = MappedArray<[['abc', true], [456, false]]>; // ['abc', 456]

export type TypeDefinition<T> = readonly [T, boolean];

function customFunction<T extends ReadonlyArray<readonly [unknown, boolean]>>(inputList: T) {
    // Type casting is required in this section
    return inputList.map(([item]) => item) as unknown as MappedArray<T>
}

const myArr = [
    ['example', true],
    [789, false],
    // Add more items here if needed
] as const;

const finalResult = customFunction(myArr); // readonly ['example', 789]

Creating an array that contains a combination of tuples

Answer №1

Answer №2

Similar questions

useEffect does not trigger a rerender on the primary parent component

Is there a distinction in Typescript between the return types of Object.seal and .freeze?

Determine the data type of a property within a JavaScript object

Error: The AWS amplify codegen is unable to locate any exported members within the Namespace API

Whenever I attempt to execute yarn build within next.js, an error always seems to occur

Executing a method from a callback within the data() function in Vue 2.7 – Here's how!

What steps should I take to resolve an unhandled promise error in a React TypeScript application while making an axios POST request?

Dealing with various node types in a parse tree using TypeScript: Tips and Tricks

React and TypeScript are not compatible - there is no overload that matches this call

TypeScript is failing to identify a correctly typed property

Fashion for the repetitive elements, activated by events

Transforming time into luxon time frames and hours

Error TS2322: The specified type Login cannot be assigned to the given type

What is the reasoning behind TypeScript's decision to permit the omission of a function's return type?

What is the reason that setState functions properly when parsing each key separately, but fails when passed as an object?

Updating the node startup file with Visual Studio 2015 using NodeJS/Typescript

The identifier "id" is not a valid index for this type

Filter the angular accordion by passing a simple array value into the input

Exporting a value from a class in Angular 2 using TypeScript

Customized interfaces utilizing generic components