无法在flow-js中将类型设置为Array<string>。

Question

在函数getRowData的最后一行之前，流中有以下错误：

消息：“无法使用绑定到getRow的el.arr调用data，因为:未知类型1的属性arr与数组类型2不兼容，或者未知类型1的属性arr与字符串3不兼容。”(引用:1)‘at：'60,44’源：'flow‘代码：’未定义‘

只有当我将Array<string>中的type UserProps更改为Array<mixed>时，此错误才会消失，但我希望保留字符串数组。

我不明白为什么我会犯这个错误。我显式地将data.audio和data.chat设置为Array<string>。任何帮助都将不胜感激！

type UserProps = {
  name: string,
  audio: Array<string>,
  chat: Array<string>,
  enableChat: boolean,
  enableAudio: boolean,
  status: string,
};

const getRow = (key, data: string[] | string, style = {}) => {
  const text = Array.isArray(data) ? data.join(", ") : data;
  return (
    <TableRowColumn
      key={`row-${key}`}
      style={{ whiteSpace: "pre-wrap", ...style }}
    >
      {text}
    </TableRowColumn>
  );
};

const getRowData = (data: UserProps) =>
  [
    data.name,
    data.status,
    {
      arr: data.audio,
      style: { color: data.enableAudio ? "green" : "red" }
    },
    { arr: data.chat, style: { color: data.enableChat ? "green" : "red" } }
  ].map(
    (el, i) =>
      el && el.arr && el.style ? getRow(i, el.arr, el.style) : getRow(i, el) // error in el.arr !!!!!
  );

Answer 1

错误有点令人困惑，但问题是流无法细化el类型。您可以做的就是稍微修改一下精化：

typeof el === 'string' ? getRow(i, el) : getRow(i, el.arr, el.style)

你可以试试，这里

Answer 2

getDataRow没有带注释的返回类型，因此它由返回值隐含，它是一个由字符串、字符串、对象、对象组成的数组，然后通过map传递(后者返回与输入相同的类型)。因此，el在map回调中是string | object。

流无法确定arr是字符串还是对象的属性。它可能是未定义的(我发现了流对复合逻辑测试的解释存在问题，就像在el && el.arr && el.style中一样。如果将它们拼写为if语句，它们就会像预期的那样工作，但逻辑&&和||似乎有问题)。

因此，flow认为el.arr与getRow的第二个参数不兼容，后者需要string[] | string。

您需要确定el的类型，然后才能访问flow的属性。测试成员arr和style的存在并不能做到这一点(虽然如果您的类型是可扩展的，那么您可能希望将不相交的联合看作一种方法，但我认为这种方法在这种情况下是行不通的，因为您别无选择，只能使用string的股票定义)。

顺便提一句，虽然简写数组语法({type}[])很方便，但在减少?的应用范围之前，它可能会与可选的或可能的值混淆。因此，我选择使用长和Array<{type}>语法。关于这个问题的文件里还有更多。