Guide on effectively converting a table of tuples to an array of objects utility function (similar to zip) while preventing the merging of all values in typescript version 5.2.2

Question

Guide on effectively converting a table of tuples to an array of objects utility function (similar to zip) while preventing the merging of all values in typescript version 5.2.2

Almost there, but stuck on the final

TS2322: Type  TcolTuple[i]  is not assignable to type  string | number | symbol

compiler error.

Here's a nifty utility function called rowsToObjects() that many developers have probably come up with at some point, somewhat resembling the concept of zip():

const objects = rowsToObjects(
    ['id', 'color' , 'shape'   , 'size'  , 'to' ] as const,  
    [  1n, 'red'   , 'circle'  , 'big'   , '0x0'] as const,
    [  2n, 'green' , 'square'  , 'small' , '0x0'] as const,
    [  3n, 'blue'  , 'triangle', 'small' , '0x0'] as const,
)

This code results in:

[
    {id: 1n, color: 'red', shape: 'circle', size: 'big', to: '0x0'},
    {id: 2n, color: 'green', shape: 'square', size: 'small', to: '0x0'},
    {id: 3n, color: 'blue', shape: 'triangle', size: 'small', to: '0x0'},
]

The actual implementation is straightforward, but achieving correct typing is posing a challenge:

export function rowsToObjects<
    Tobj extends { [i in keyof TcolTuple as TcolTuple[i]]: TvalTuple[i] },
    TcolTuple extends readonly string[],
    TvalTuple extends { [j in keyof TcolTuple]: unknown }
>(cols: TcolTuple, ...rows: TvalTuple[]): Tobj[];

While the current code seems logically sound, the issue arises with the as TcolTuple[i] part:

TS2322: Type  TcolTuple[i]  is not assignable to type  string | number | symbol 
  Type  TcolTuple[keyof TcolTuple]  is not assignable to type  string | number | symbol 
    Type
    TcolTuple[string] | TcolTuple[number] | TcolTuple[symbol]
    is not assignable to type  string | number | symbol 
      Type  TcolTuple[string]  is not assignable to type  string | number | symbol

Is there something obvious I'm overlooking here? The typing is almost satisfactory, but without as TcolTuple[i], it merges all values without recognizing their respective keys.

https://i.stack.imgur.com/0NOB7.png

typescript typescript-generics typing keyof

Answer 1

Answer №1

It seems that the primary issue you are encountering with

{ [I in keyof TcolTuple as TcolTuple[I]]: TvalTuple[I] }

is related to the use of key remapping, which hinders the homomorphic nature of the mapped type (refer to What does "homomorphic mapped type" mean?). This results in mapping over all indices rather than solely focusing on numeric-like indices of the tuple, incorporating elements like number, creating an undesired union.

The solution is straightforward - explicitly map only over the numeric-like indices by intersecting keyof TcolTuple with the template literal type `${number}` (as introduced in microsoft/TypeScript#40598). This eliminates non-string number representations, refining the output to just

"0" | "1" | "2"

.

This modification resolves the issue:

declare function rowsToObjects<
  Tobj extends { [I in `${number}` & keyof TcolTuple as TcolTuple[I]]: TvalTuple[I] },
  TcolTuple extends readonly string[],
  TvalTuple extends { [J in keyof TcolTuple]: unknown }
>(cols: TcolTuple, ...rows: TvalTuple[]): Tobj[];

const objects = rowsToObjects(
  ['id', 'color', 'shape', 'size', 'to'] as const,
  [1n, 'red', 'circle', 'big', '0x0'] as const,
  [2n, 'green', 'square', 'small', '0x0'] as const,
  [3n, 'blue', 'triangle', 'small', '0x0'] as const,
)
/* const objects: {
    id: 1n | 2n | 3n;
    color: "red" | "green" | "blue";
    shape: "circle" | "square" | "triangle";
    size: "big" | "small";
    to: "0x0";
}[] */

If I were writing this personally, I would:

opt for const type parameters instead of expecting users to employ const assertions;
preserve tuple types of inputs to maintain order consistency between input and output arrays;
remove redundant generic type parameters and handle outputs directly without default type arguments reliance;
adopt uppercase letters for mapped type parameters like I and J to distinguish typically variable names from types.

While not critical, these adjustments yield a refined output:

declare function rowsToObjects<
  const K extends readonly PropertyKey[],
  const V extends readonly Record<keyof K, unknown>[]
>(
  cols: K, ...rows: V
): { [I in keyof V]:
    { [J in `${number}` & keyof K as K[J]]:
      V[I][J]
    }
  };

const objects = rowsToObjects(
  ['id', 'color', 'shape', 'size', 'to'],
  [1n, 'red', 'circle', 'big', '0x0'],
  [2n, 'green', 'square', 'small', '0x0'],
  [3n, 'blue', 'triangle', 'small', '0x0'],
)
/* const objects: readonly [{
    id: 1n;
    color: "red";
    shape: "circle";
    size: "big";
    to: "0x0";
}, {
    id: 2n;
    color: "green";
    shape: "square";
    size: "small";
    to: "0x0";
}, {
    id: 3n;
    color: "blue";
    shape: "triangle";
    size: "small";
    to: "0x0";
}] */

Playground link to code

Answer 2

It seems that the primary issue you are encountering with

{ [I in keyof TcolTuple as TcolTuple[I]]: TvalTuple[I] }

is related to the use of key remapping, which hinders the homomorphic nature of the mapped type (refer to What does "homomorphic mapped type" mean?). This results in mapping over all indices rather than solely focusing on numeric-like indices of the tuple, incorporating elements like number, creating an undesired union.

The solution is straightforward - explicitly map only over the numeric-like indices by intersecting keyof TcolTuple with the template literal type `${number}` (as introduced in microsoft/TypeScript#40598). This eliminates non-string number representations, refining the output to just

"0" | "1" | "2"

.

This modification resolves the issue:

declare function rowsToObjects<
  Tobj extends { [I in `${number}` & keyof TcolTuple as TcolTuple[I]]: TvalTuple[I] },
  TcolTuple extends readonly string[],
  TvalTuple extends { [J in keyof TcolTuple]: unknown }
>(cols: TcolTuple, ...rows: TvalTuple[]): Tobj[];

const objects = rowsToObjects(
  ['id', 'color', 'shape', 'size', 'to'] as const,
  [1n, 'red', 'circle', 'big', '0x0'] as const,
  [2n, 'green', 'square', 'small', '0x0'] as const,
  [3n, 'blue', 'triangle', 'small', '0x0'] as const,
)
/* const objects: {
    id: 1n | 2n | 3n;
    color: "red" | "green" | "blue";
    shape: "circle" | "square" | "triangle";
    size: "big" | "small";
    to: "0x0";
}[] */

If I were writing this personally, I would:

opt for const type parameters instead of expecting users to employ const assertions;
preserve tuple types of inputs to maintain order consistency between input and output arrays;
remove redundant generic type parameters and handle outputs directly without default type arguments reliance;
adopt uppercase letters for mapped type parameters like I and J to distinguish typically variable names from types.

While not critical, these adjustments yield a refined output:

declare function rowsToObjects<
  const K extends readonly PropertyKey[],
  const V extends readonly Record<keyof K, unknown>[]
>(
  cols: K, ...rows: V
): { [I in keyof V]:
    { [J in `${number}` & keyof K as K[J]]:
      V[I][J]
    }
  };

const objects = rowsToObjects(
  ['id', 'color', 'shape', 'size', 'to'],
  [1n, 'red', 'circle', 'big', '0x0'],
  [2n, 'green', 'square', 'small', '0x0'],
  [3n, 'blue', 'triangle', 'small', '0x0'],
)
/* const objects: readonly [{
    id: 1n;
    color: "red";
    shape: "circle";
    size: "big";
    to: "0x0";
}, {
    id: 2n;
    color: "green";
    shape: "square";
    size: "small";
    to: "0x0";
}, {
    id: 3n;
    color: "blue";
    shape: "triangle";
    size: "small";
    to: "0x0";
}] */

Playground link to code

Guide on effectively converting a table of tuples to an array of objects utility function (similar to zip) while preventing the merging of all values in typescript version 5.2.2

Answer №1

Similar questions

Check if the input values are already in the array and if not, then add

Using TypeScript will result in errors when attempting to use the Promise object and the Awaited keyword

Is there a way to help my KafkaJS consumer stay patient while waiting for a broker to become available?

Choosing the primary camera on a web application with multiple rear cameras using WebRTC

When dynamically selecting an item from a dropdown menu, the object property does not display as expected when using the patchValue

Problem encountered when attempting to save log information to a file using typescript-logging in Angular 11

The functionality to subscribe in ts(6385) has been marked as

Extracting PDF files using API within Angular services

When intercepted, the HttpRequest is being canceled

Create a Typescript function that adheres to a specified type

Arranging JavaScript object by object properties (name)

The submission functionality of an Angular form can be triggered by a separate button

Accessing the state from a child functional component and then adding it to an array of objects in the parent component

Using the setupFiles option to set up files and execute code prior to running tests

What should be included in the types field of package.json for TypeScript libraries?

Divide a given number of elements within an array of arrays

Mono repo project utilizing Angular 4+ and Typescript, enhanced with Bootstrap styling

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Combining Angular 2 and Sails.js for Ultimate Web Development

Dealing with nullable properties in Typescript