To enable iteration of iterators when trying to spread, utilize the TypeScript compiler option '--downlevelIteration'

Question

To enable iteration of iterators when trying to spread, utilize the TypeScript compiler option '--downlevelIteration'

I have a function that accepts an argument of either an object or an array.

const handleScenarioChange = (scenario: Scenario | Scenario[]) => {
  if (isArray(scenario)) {
    const scenarios = [...state.selectedScenarios, ...scenario];
    const uniqueScenarios = removeDuplicateScenarios(scenarios);
    setState({ selectedScenarios: sortBy(uniqueScenarios, ['Name']) });
  } else {
    // If scenario is not an array, it means this is adding a tag
    const scenarios = [...state.selectedScenarios, scenario];
    const uniqueScenarios = removeDuplicateScenarios(scenarios);
    setState({ selectedScenarios: sortBy(uniqueScenarios, ['Name']) });
  }
};

As seen above, I am creating uniqueScenarios and updating the state within an if and else block. However, I aim to achieve the same result using a ternary operator.

I attempted

    const scenarios = [...state.selectedScenarios, ...(isArray(scenario)) ? ...scenario : scenario];
    const uniqueScenarios = removeDuplicateScenarios(scenarios);
    setState({ selectedScenarios: sortBy(uniqueScenarios, ['Name']) });

The target for my compilerOptions.target in my tsconfig.json file is es5. I switched it to es6 but the issue persists. Seeking guidance on this matter.

Find Stackblitz link here

typescript tsconfig

Answer 1

Answer №1

The initial code snippet should function without any errors, however, the second snippet contains incorrect syntax:

const scenarios = [
  ...state.selectedScenarios,
  ...(isArray(scenario)) ? ...scenario : scenario
];

There are excessive ... spreads present in this code. The spread with parentheses will distribute an array that is the result of the expression within the parentheses. This implies that the parentheses must evaluate to an array.

[...(expression().thatReturns().anArray)]

In order for the ternary operation to function correctly, it is essential to ensure that it always produces an array, either by returning the original array or encasing the single item case within an array:

  const scenarios = [
    ...selectedScenarios,
    ...(Array.isArray(scenario) ? scenario : [scenario])
  ];

Answer 2

The initial code snippet should function without any errors, however, the second snippet contains incorrect syntax:

const scenarios = [
  ...state.selectedScenarios,
  ...(isArray(scenario)) ? ...scenario : scenario
];

There are excessive ... spreads present in this code. The spread with parentheses will distribute an array that is the result of the expression within the parentheses. This implies that the parentheses must evaluate to an array.

[...(expression().thatReturns().anArray)]

In order for the ternary operation to function correctly, it is essential to ensure that it always produces an array, either by returning the original array or encasing the single item case within an array:

  const scenarios = [
    ...selectedScenarios,
    ...(Array.isArray(scenario) ? scenario : [scenario])
  ];

To enable iteration of iterators when trying to spread, utilize the TypeScript compiler option '--downlevelIteration'

Answer №1

Similar questions

Is there an alternative course of action since determining if Observable is empty is not feasible?

The most accurate type to determine after verifying that `typeof a === 'object' && a !== null` is the following

Updating parent components through child components in ReactWould you like another unique

Setting text in a datetime picker with ngx-mat-datetime-picker in an Angular application is a straightforward process

What is preventing me from running UNIT Tests in VSCode when I have both 2 windows and 2 different projects open simultaneously?

Tips for calculating the total sum of inner object property values using JavaScript, TypeScript, or Angular 5

Customizing the Switch component individually for each item fetched from an API in React Native

Different combinations of fields in Typescript types

Creating and updating a TypeScript definition file for my React component library built with TypeScript

The Typescript "and" operator is used for combining multiple conditions

Vue/Vite vanilla setup encountering a 'Failed to fetch dynamically imported module' TypeError

The ng2-intl encounters an issue when trying to resolve symbol values statically

Tips for effectively managing loading and partial states during the execution of a GraphQL query with ApolloClient

What is causing the error message "Module '@reduxjs/toolkit' or its type declarations are not found" to appear?

Why does isDisplayed method in Protractor return "No element found using locator" instead of a boolean value?

Displaying data from multiple checkboxes in an Angular application using an array

Creating an endless scrolling feature with Ionic 3

The data retrieved from the web API is not undergoing the necessary conversion process

Eliminate all citation markers in the final compiled result

Modifying the value of a React input component is restricted when the "value" field is utilized