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

Question

我有一个 function 有一个类型为 object 或数组的参数。

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 块中再次设置 state。 但是，我想使用三元运算符来做同样的事情。

我试过了

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

我的 tsconfig.json 中的 compilerOptions.target 是 es5。 我改成es6还是不行。 请指教。

Stackblitz 链接： URL

Answer 1

您的第一个片段应该可以正常工作，但您的第二个片段的语法无效：

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

你有太多的...点差在这里。 带括号的传播将传播一个数组，该数组是括号中表达式的值。 这意味着括号必须解析为数组。

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

因此，要使该三元组起作用，您需要通过返回原始数组或将单个项目案例包装在一个数组中来确保它始终返回一个数组：

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