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

Question

函数 getRowData 的最后一行之前的一个流程中出现以下错误:

message: 'Cannot call getRow with el.arr bound to data because: Either property arr of unknown type [1] is incompatible with array type [2]. Or property arr of unknown type [1] is incompatible with string [3]. (References: [1] [2] [3])' at: '60,44' source: 'flow' code: 'undefined'

仅当我更改 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

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

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

你可以试试here