javascript Flow中使用泛型类型的函数重载

huus2vyu  于 2023-05-21  发布在  Java
关注(0)|答案(1)|浏览(209)

我有一个组件

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

我正在使用Flow进行类型检查,想知道是否有可能让ButtonGroup组件以这样一种方式进行泛型类型化,即如果value的类型与option.[0].value的类型不相同,则会引发Flow错误?这应该适用于任何匹配类型,例如数字,数组等。并且仅在valueoption[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中的this can be done,只是想知道这是否可以在Flow中完成?
谢谢大家!

nukf8bse

nukf8bse1#

我认为问题是T在所有示例中都被number | string | []替换。所以你最后会得到

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

这样的东西可能是你正在寻找的:

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

这里有一个流程Try It链接来查看示例

相关问题