Update tuple type with a new one

Question

Update tuple type with a new one

I have created the following code snippet and verified that it is functional:

function cases<K extends string, V, U, T>(map: { [key in K]: [V, U, T] }): [K, V, U, T][];
function cases<K extends string, V, U>(map: { [key in K]: [V, U] }): [K, V, U][];
function cases<K extends string, V>(map: { [key in K]: V }): [K, V][];
function cases<K extends string, V>(map: { [key in K]: V }) {
  return Object.keys(map).map(key => ([key] as any[]).concat(map[key as K]) as any);
}

for (const [key, arr, res] of cases({
    "abc": [[1, 2, "qqq"], 'qwe'],
    "def": [[4, 5, "asd"], 'www'],
})) {
    // const key: "abc" | "def"
    // const arr: (string | number)[]
    // const res: string
}

However, I am trying to avoid writing multiple overloads like this:

function cases<K extends string, V, U, T>(map: { [key in K]: [V, U, T] }): [K, V, U, T][];
function cases<K extends string, V, U>(map: { [key in K]: [V, U] }): [K, V, U][];
function cases<K extends string, V>(map: { [key in K]: V }): [K, V][];

and instead want to define a tuple type:

function cases<K extends string, V extends any[]>(map: { [key in K]: V }): [K, ...V] {

Unfortunately, it fails with an error message:

A rest element type must be an array type.

How can I resolve this issue?

arrays typescript arguments tuples

Answer 1

Answer №1

The format [H, ...T] was initially suggested for usage but unfortunately is not currently supported. The inclusion of tuples in rest/spread positions in TypeScript version 3.0 provides an alternative approach to represent the same idea:

type Cons<H, T extends readonly any[]> =
  ((h: H, ...t: T) => void) extends ((...r: infer R) => void) ? R : never;

See how this can be applied:

type ConsTest = Cons<1, [2, 3, 4]> // [1, 2, 3, 4]

To define your cases() function with types:

function cases<K extends string, T extends any[]>(
  map: { [key in K]: T | [] }
): Array<Cons<K, T>> {
  return Object.keys(map).map(
    key => ([key] as any[]).concat(map[key as K]) as any
  );
}

The return type specified is Array<Cons<K, T>>, where T denotes the array type within the properties of the map parameter. Additionally, note that I made the property type in map to be T | [] instead of just T. This serves as a hint for the compiler to infer the type of map as a tuple if possible. This enables more accurate inference, especially when involving arrays like ["a", 1], ensuring they are recognized as tuples ([string, number]) rather than Array<string | number>. This adjustment may have resolved any issues you encountered while implementing this logic? Alternatively, you could utilize const assertions or other annotations to force the property types in map to become tuples.

Let's test it out to confirm its functionality:

for (const [key, arr, res] of cases({
  "abc": [[1, 2, "qqq"], 'qwe'],
  "def": [[4, 5, "asd"], 'www'],
})) {
  key; // "abc" | "def"
  arr; // (string | number) []
  res; // string
}

It appears everything is working correctly. Best of luck with your project!

Link to code

for (const [key, arr, res] of cases({
  "abc": [[1, 2, "qqq"], 'qwe'],
  "def": [[4, 5, "asd"], 'www'],
})) {
  key; // "abc" | "def"
  arr; // (string | number) []
  res; // string
}

Answer 2

The format [H, ...T] was initially suggested for usage but unfortunately is not currently supported. The inclusion of tuples in rest/spread positions in TypeScript version 3.0 provides an alternative approach to represent the same idea:

type Cons<H, T extends readonly any[]> =
  ((h: H, ...t: T) => void) extends ((...r: infer R) => void) ? R : never;

See how this can be applied:

type ConsTest = Cons<1, [2, 3, 4]> // [1, 2, 3, 4]

To define your cases() function with types:

function cases<K extends string, T extends any[]>(
  map: { [key in K]: T | [] }
): Array<Cons<K, T>> {
  return Object.keys(map).map(
    key => ([key] as any[]).concat(map[key as K]) as any
  );
}

The return type specified is Array<Cons<K, T>>, where T denotes the array type within the properties of the map parameter. Additionally, note that I made the property type in map to be T | [] instead of just T. This serves as a hint for the compiler to infer the type of map as a tuple if possible. This enables more accurate inference, especially when involving arrays like ["a", 1], ensuring they are recognized as tuples ([string, number]) rather than Array<string | number>. This adjustment may have resolved any issues you encountered while implementing this logic? Alternatively, you could utilize const assertions or other annotations to force the property types in map to become tuples.

Let's test it out to confirm its functionality:

for (const [key, arr, res] of cases({
  "abc": [[1, 2, "qqq"], 'qwe'],
  "def": [[4, 5, "asd"], 'www'],
})) {
  key; // "abc" | "def"
  arr; // (string | number) []
  res; // string
}

It appears everything is working correctly. Best of luck with your project!

Link to code

for (const [key, arr, res] of cases({
  "abc": [[1, 2, "qqq"], 'qwe'],
  "def": [[4, 5, "asd"], 'www'],
})) {
  key; // "abc" | "def"
  arr; // (string | number) []
  res; // string
}

Update tuple type with a new one

Answer №1

Similar questions

Mastering the Manipulation of JSONObject and JSONArray in J2ME

Converting JSON data into a JavaScript array and storing it in a variable

What is the best way to integrate asynchronous computed observable with several concurrent $.ajax requests?

Navigating the realm of Ionic Storage: mastering simplicity within the realm of Promises

What is the best method to retrieve a specific element from a json array within postgresql?

What is the importance of injecting a service through a constructor in Angular 2?

Convert an object to nested JSON in Angular 5

Having trouble accessing array value in Reactjs - returning undefined

When attempting to access the Angular Component, a 127.0.0.1 error indicating that the page was not found

the undefined 'pipe' cannot be read

Mapping objects in an array with React.js

Is my solution handling exceptions properly in corner cases?

What is the best way to merge two nested arrays of objects in JavaScript that share a common parent?

The types definition for OpenSeadragon is lacking a property

Having trouble with [at-loader] while incorporating Typescript and react-bootstrap in webpack?

Disable dates that are more than 7 days from the current date using Material UI's Date

Is it possible to return an empty array within an HttpInterceptor when encountering an error?

What steps can I take to fix the ESM / require error while using TypeScript 4.8?

What is the best way to see if a variable is present in TypeScript?

Enabling Typescript to identify additional methods introduced via Object.prototype