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

Refresh the image source using the AJAX success callback

How can I call a global function in Angular 8?

Date range within a conditional statement

Issues are arising with the for loop in an express node js app using ejs, as it is not displaying the intended data and

Guide on adjusting the CSS styling of elements in real-time from the backend using a user customization panel to modify the appearance of various web pages

Avoid circular dependencies in Angular 6 to ensure proper association between modules

Navigate to the chosen item in material-ui scroll bar

Displaying dropdown options based on the previous selection made by the user

The useEffect hook in React is signaling a missing dependency issue

The incredible power of the MongoDB $inc field

A guide to creating a JavaScript function that outputs a script in string form

Combine various input data and store it in a variable

Keep an eye on the syncing progress of pouchdb replication

Vue table does not update when checkbox is unchecked

Issue with Jquery .on() causing toggleClass function to not trigger

Find out if a dynamically imported component has finished loading in Nextjs

Encountering the error code 'ERR_EMPTY_RESPONSE' while utilizing an AJAX-powered live search feature

How can we determine the remaining balance in the user's wallet after making purchases using JavaScript?

Error in Chart.jsx: Unable to retrieve the length property of an undefined object in the COVID-19 Tracker App

guide to utilizing npm/yarn with tsx react