Typescript使用编译器选项'--downlevelIteration'允许在尝试传播时迭代迭代器错误

Question

我有一个函数，其参数类型为对象或数组。

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, that means this is adding tag
    const scenarios = [...state.selectedScenarios, scenario];
    const uniqueScenarios = removeDuplicateScenarios(scenarios);
    setState({ selectedScenarios: sortBy(uniqueScenarios, ['Name']) });
  }
};

如您所见，我正在创建uniqueScenarios，并在if和else块中再次设置状态。但是，我想使用三元运算符来执行相同的操作。

我尝试过

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

我的tsconfig.json中的我的editorOptions.target是es5。我将其更改为es6，但仍然无法正常工作。请指教。

Stackblitz链接：URL

Answer 1

您的第一个代码段应该可以正常运行，但第二个代码段的语法无效：

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

您在这里有太多的...点差。使用parens进行的扩展将扩展一个数组，该数组是parens中表达式的值。这意味着parens 必须解析为数组。

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

因此，要使该三元方法起作用，您需要通过返回原始数组或将单个项目大小写包装在数组中来确保它总是返回数组：

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