Flow 中的泛型函数重载

Question

我有一个组件

<ButtonGroup
  value={value}
  options={[1, 2, 3, 4, 5, 6].map((x) => {
    return { label: x, value: x };
  })}
/>

我正在使用 Flow 进行类型检查，我想知道，是否可以让

ButtonGroup

组件以这样一种方式进行通用类型化，即如果

value

的类型与

option.[0].value

？这应该适用于任何匹配类型，例如数字、数组等，并且只有在

value

和

option[at_some_index].value

的类型不同

时才会引发

我目前拥有的：

type Props<T> = {
  options: Array<{
    label: React$Node,
    value: T,
  }>,
  value: T,

};

这适用于检查匹配类型，但仅适用于特定类型。例如，如果我这样做

export const ButtonGroup = ({options, value}: Props<number>) => {do stuff}

它将按预期适用于数字类型，但如果我添加联合类型以对字符串、数组具有相同的行为，就像这样

Props<number | string | []>

如果值的类型不匹配，流程将停止引发错误。

以下也不行：

export const ButtonGroup = <T>({options, value}: Props<T>) => {do stuff}

我知道这可以在 Typescript 中完成，只是想知道这是否可以在 Flow 中完成？

谢谢！

Answer 1

我认为问题在于

T

在所有情况下都被

number | string | []

取代。所以你最终得到了

type Props<number | string | []> = {
  options: Array<{
    label: React$Node,
    value: (number | string | []),
  }>,
  value: (number | string | []),
};

这样的东西可能更符合您的需求：

type NumOrStringStrictProps = Props<number> | Props<string>

这是一个流程试一试链接看一个例子