Typescript 3.0.1 无法理解嵌套的 reduce(s)

Question

所以我有这段代码可以找到 x 子数组的所有可能组合：

const optionGroups: string[][] = [['Beer', 'Not beer'], ['1', '2', '11']];

const combinations = optionGroups.reduce((opt1, opt2) => {
  return opt1.reduce((acc, option1) => {
    return acc.concat(opt2.map(option2 => {
      return (<string[]>[]).concat(option1, option2);
    }));
  }, []);
});

return combinations; // <-- This is not a string[]

然而 Typescript 认为返回类型是 string[]，而实际上它是 string[][]。

输出为[['1', 'Beer'], ['2', 'Beer']...]等

我终其一生都无法弄清楚如何修复这种类型。你可以自己试试sn-p看看。

即使转换它也会产生错误：

类型“string[]”无法转换为类型“string[][]”。类型 'string' 不能与类型 'string[]' 比较。

任何指针？

Answer 1

使用外部 reduce 将 optionGroups 解构为两个元素很奇怪，这也是问题的根源，因为当您在没有初始状态的情况下执行 reduce 时，假定状态与输入的一个元素，即string[]。外部回调实际上返回string[][]，但是不匹配没有被捕获，因为内部reduce 的初始状态[] 的类型被扩大到any[]，而没有给出任何隐含错误；见this issue。启用strictNullChecks 将禁用这种糟糕的扩展形式并给您预期的类型错误。

Answer 2

查看在这种情况下使用的Array.prototype.reduce 的类型定义（第一次调用它）：

reduce(callbackfn: (prev: T, curr: T) => T): T;

T 是数组元素类型。由于您的呼叫在string[][] 或Array<string[]> 上运行，因此T 是string[]。所以reduce调用的返回值也必须是string[]。所以从这里的类型来看，一切似乎都是正确的。

但这显然不是您运行代码时发生的情况。返回值是一个实际的string[][]。当您调试代码时，您会看到类型实际上会在运行时发生变化。

原因是reduce 在不传递初始值时如何工作：

如果没有提供初始值，将使用数组中的第一个元素。

所以opt1 的第一个值将是optionGroups 和string[] 的第一个元素。然后，内部代码运行后，结果实际上是string[][]。您可以通过在内部明确类型来轻松确认这一点：

const combinations = optionGroups.reduce((opt1, opt2) => {
  const result = opt1.reduce((acc, option1) => {
    return acc.concat(opt2.map(option2 => {
      return (<string[]>[]).concat(option1, option2);
    }));
  }, <string[][]>[]);
  return <any>result;
});

所以现在的问题是result 是string[][]，但外部reduce 仍然假定先前值的string[]（因为它的静态类型）。因此，您将不得不为 reduce 使用不同的类型定义，允许先前值和当前值使用不同的类型：

reduce<U>(callbackfn: (prev: U, curr: T) => U, initialValue: U): U;

不幸的是，这里的初始值是强制性的，所以你必须通过它。你不能在这里传递null 甚至是一个空数组，因为这会破坏你的逻辑，所以你必须稍微调整你的逻辑来以不同的方式处理第一次迭代。比如这样：

const combinations = optionGroups.reduce<string[][]>((opt1, opt2) => {
  if (opt1 === null) {
    return opt2.map(option2 => [option2]);
  }

  return opt1.reduce((acc, option1) => {
    return acc.concat(opt2.map(option2 => {
      return (<string[]>[]).concat(option1, option2);
    }));
  }, <string[][]>[]);
}, null);