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

【问题标题】：Can't set type to Array<string> in flow-js无法在 flow-js 中将类型设置为 Array<string>
【发布时间】：2018-09-06 22:50:27
【问题描述】：

我在函数getRowData的最后一行之前出现以下错误：

消息：'不能调用 getRow 与 el.arr 绑定到 data 因为：未知类型 [1] 的任一属性 arr 与数组不兼容键入 [2]。或未知类型 [1] 的属性 arr 不兼容字符串 [3]。（参考文献：[1] [2] [3]）' at：'60,44' 来源：'flow' 代码：'未定义'

仅当我将 type UserProps 中的 Array<string> 更改为 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 !!!!!
  );

【问题讨论】：

新手问题，但是：Array<string> 等于 string[] 吗？
是的，与 string[] 相同的错误

标签： javascript reactjs visual-studio-code flowtype

【解决方案1】：

错误有点令人困惑，但问题是流程无法细化el 类型。你可以做的是稍微改变细化：

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

你可以试试here

【讨论】：

【解决方案2】：

getDataRow没有带注解的返回类型，所以由返回值隐含，是一个由字符串、字符串、对象、对象组成的数组，然后通过map（返回相同的类型作为输入）。因此，map 回调中的el 是string | object。

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

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

在访问属性之前，您需要确定el 的类型才能使流程满意。测试成员 arr 和 style 的存在不会这样做（尽管如果您的类型具有延展性，您可能希望将不相交联合视为一种这样做的方式，但我认为这在此行不通情况，因为您别无选择，只能使用 string 的股票定义。

附带说明，虽然速记数组语法 ({type}[]) 可能很方便，但在您对 ? 的使用范围较小之前，它可能会与可选值或值混淆。因此，我选择使用普通的Array<{type}> 语法。有关该主题的文档中有更多内容。

【讨论】：