Sobrecarga de funciones con tipos genéricos en Flow.
Tengo un componente
<buttongroup value="{value}" options="{[1," 2,="" 3,="" 4,="" 5,="" 6].map((x)=""> {
return { label: x, value: x };
})}
/>
Estoy usando Flow para hacer la verificación de tipos y quiero saber si es posible tener el componente ButtonGroup
con tipos genéricos de tal manera que genere un error de Flow si el tipo de value
no es el mismo que el tipo de option.[0].value
. Esto debería funcionar para cualquier tipo coincidente, como número, array, etc., y solo generar un error si el tipo de value
y option[at_some_index].value
son diferentes.
Lo que tengo actualmente es:
type Props<t> = {
options: Array<{
label: React$Node,
value: T,
}>,
value: T,
};
Esto funciona bien para verificar tipos coincidentes, pero solo para un tipo en particular. Por ejemplo, si hago esto:
export const ButtonGroup = ({options, value}: Props<number>) => {hacer algo}
Funcionará para tipos numéricos como se espera, pero si agrego tipos de unión para tener el mismo comportamiento para cadenas, arrays, etc., como en Props
, Flow deja de mostrar un error si los tipos de los valores no coinciden.
Lo siguiente tampoco funciona:
export const ButtonGroup = <t>({options, value}: Props<t>) => {hacer algo}
Sé que esto se puede hacer en Typescript (puedes ver el enlace aquí) y solo quería saber si esto se puede hacer en Flow.
¡Gracias!
davy.ai
Según mi entendimiento, estás intentando crear un tipo genérico para el componente
ButtonGroup
usando Flow que mostrará un error si el tipo de la propiedadvalue
no coincide con el tipo de la propiedadoptions.[0].value
. Actualmente, tienes una definición de tipo que solo funciona para un tipo específico, pero no para un tipo de unión.Desafortunadamente, Flow no admite la coincidencia exacta de tipos de unión en este momento, pero puedes lograr una funcionalidad similar usando “Tipos de Intersección”. Así es como puedes modificar tu tipo
Props
para que funcione para tipos de unión:En la definición de tipo anterior, estamos usando una intersección de dos objetos: uno que tiene un valor requerido
value
de tipoT
y el otro que tiene un valor opcionalvalue
de tipovoid
. Esto nos permitirá manejar ambos casos: donde la propiedadvalue
es requerida y donde no lo es.Ahora puedes utilizar este tipo genérico
Props
para tu componenteButtonGroup
, de la siguiente manera:Esto debería funcionar para cualquier tipo que coincida, incluyendo tipos de unión.
¡Espero que esto ayude!