I have a component
<ButtonGroup
value={value}
options={[1, 2, 3, 4, 5, 6].map((x) => {
return { label: x, value: x };
})}
/>
I am using Flow for type checking and want to know, whether it is possible to have ButtonGroup
component be generically typed in such a way that it will raise a Flow error if type of value
is not the same as type of option.[0].value
? This should work for any matching type, e.g number, array, etc. and only raise if type of value
and option[at_some_index].value
are different
What I currently have:
type Props<T> = {
options: Array<{
label: React$Node,
value: T,
}>,
value: T,
};
This works fine for checking matching types but only for a particular type. E.g if I do
export const ButtonGroup = ({options, value}: Props<number>) => {do stuff}
It will work for number types as expected, but if I add union types to have the same behaviour for strings, arrays, like so Props<number | string | []>
flow stops raising an error if types of values don’t match.
Below also doesn’t work:
export const ButtonGroup = <T>({options, value}: Props<T>) => {do stuff}
I know this can be done in Typescript and was just wondering whether this can be done in Flow?
Thank you!