To avoid TS2556 error in TypeScript, make sure that a spread argument is either in a tuple type or is passed to a rest parameter, especially when using

Question

To avoid TS2556 error in TypeScript, make sure that a spread argument is either in a tuple type or is passed to a rest parameter, especially when using

So I'm working with this function:

export default function getObjectFromTwoArrays(keyArr: Array<any>, valueArr: Array<any>) {
  // Beginning point:
  //  [key1,key2,key3],
  //  [value1,value2,value3]
  //
  // End point: {
  //  key1: value1,
  //  key2: value2,
  //  key3: value3
  // }

  if (keyArr.length === valueArr.length) {
    // @ts-ignore
    return Object.assign(...keyArr.map((el,index) => ({[el]: valueArr[index]})))
  } else {
    throw new Error(`The arrays must be the same length: ${{keyArr}}, ${{valueArr}}`)
  }
}

I am trying to achieve the desired result from the example above - End point. I attempted to assign it to a variable, but encountered the same issue.

I also tried replacing it with:

Object.assign({...keyArr.map((el,index) => ({[el]: valueArr[index]}))})

However, the outcome would be:

{0: {key1: value1}, 1: {key2: value2}}

The same goes for

Object.assign([...keyArr.map((el,index) => ({[el]: valueArr[index]}))])

Resulting in: [{key1: value1}, {key2: value2}]

javascript arrays typescript function object

Answer 1

Answer №1

When utilizing the Object.assign method, it is crucial to ensure that at least one parameter is specified. In your particular function, there was a possibility that the array being spread could be empty. The key message in the error points out that ""must be passed to a rest parameter" which indicates the need to utilize the correct overload signature from the various overload signatures. To avoid the necessity for // @ts-ignore, the recommended approach would be:

return Object.assign({}, ...keyArr.map((el,index) => ({[el]: valueArr[index]})))
//                   ^^^

^{(Playground demo)}

However, an even better alternative to using Object.assign is Object.fromEntries, specifically designed for handling iterables of tuples:

export default function getObjectFromTwoArrays(keyArr: Array<any>, valueArr: Array<any>) {
  if (keyArr.length === valueArr.length) {
    return Object.fromEntries(keyArr.map((key, index) => [key, valueArr[index]]))
  } else {
    throw new Error(`Arrays should be the same length: ${{keyArr}}, ${{valueArr}}`)
  }
}

Answer 2

When utilizing the Object.assign method, it is crucial to ensure that at least one parameter is specified. In your particular function, there was a possibility that the array being spread could be empty. The key message in the error points out that ""must be passed to a rest parameter" which indicates the need to utilize the correct overload signature from the various overload signatures. To avoid the necessity for // @ts-ignore, the recommended approach would be:

return Object.assign({}, ...keyArr.map((el,index) => ({[el]: valueArr[index]})))
//                   ^^^

^{(Playground demo)}

However, an even better alternative to using Object.assign is Object.fromEntries, specifically designed for handling iterables of tuples:

export default function getObjectFromTwoArrays(keyArr: Array<any>, valueArr: Array<any>) {
  if (keyArr.length === valueArr.length) {
    return Object.fromEntries(keyArr.map((key, index) => [key, valueArr[index]]))
  } else {
    throw new Error(`Arrays should be the same length: ${{keyArr}}, ${{valueArr}}`)
  }
}

Answer 3

Answer №2

It appears that you are attempting to transform an array of keys and an array of values into an object based on the parameter names used. However, Object.assign requires two parameters: a source and a target, neither of which should be arrays. To achieve your desired outcome, you should utilize Object.fromEntries after combining the key and value arrays into pairs:

const combineArrays = (keys, values) => {
  if (keys.length === values.length) {
    return keys.map((key, index) => [key, values[index]]);
  } else {
    throw new Error('Arrays must be equal in length for merging');
  }
};

const createObjectFromArrays = (keys, values) => Object.fromEntries(combineArrays(keys, values));

The Object.fromEntries function transforms an array of key/value pairs into an object, serving as the opposite of Object.entries. For more information, refer to:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

Answer 4

It appears that you are attempting to transform an array of keys and an array of values into an object based on the parameter names used. However, Object.assign requires two parameters: a source and a target, neither of which should be arrays. To achieve your desired outcome, you should utilize Object.fromEntries after combining the key and value arrays into pairs:

const combineArrays = (keys, values) => {
  if (keys.length === values.length) {
    return keys.map((key, index) => [key, values[index]]);
  } else {
    throw new Error('Arrays must be equal in length for merging');
  }
};

const createObjectFromArrays = (keys, values) => Object.fromEntries(combineArrays(keys, values));

The Object.fromEntries function transforms an array of key/value pairs into an object, serving as the opposite of Object.entries. For more information, refer to:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

To avoid TS2556 error in TypeScript, make sure that a spread argument is either in a tuple type or is passed to a rest parameter, especially when using

Answer №1

Answer №2

Similar questions

I have discovered some amazing jQuery image hover effects that are simply breathtaking –

Enhancing the appearance of a checkbox within a ReactJS setting

Challenges associated with utilizing img src in JavaScript

How can I attach events to newly generated elements without using jQuery?

What are the drawbacks of introducing a dependency within the constructor?

Angular rxjs Distinctions

Error in React+Redux: Trying to access the "address" property of a null value is not permitted

What are the best ways to resolve the warning from webpack in Express?

Steps to retrieve the value stored in a variable within an Angular service from a separate component

My goal is to generate four HTML buttons that trigger specific functions: addition, subtraction, multiplication, and division

What is the method for arranging objects in AngularJS using a custom sorting sequence?

What is the best way to limit a form to only allow 2 checkbox selections?

Troubleshooting loading specific story types on hacker news API with Angular.js

Ensure the button remains in focus after clicking on the input field: Material-Ui

Tips for customizing the border radius style of the menu in Vuetify's v-autocomplete component

Creating a class in JavaScript following an AJAX request

The map fails to load on the HTML page

Illuminated Box with Text Beneath Image Overlay

I'm curious about the outcomes of the JavaScript test. Could someone provide an explanation

Using MUI Select with Array of Objects for values - Learn how to deselect a predefined state