Sobrecarga de funciones con tipos genéricos en Flow.

14 Jul, 2023 Programación 0

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

July 14, 2023 at 9:29 am

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 propiedad value no coincide con el tipo de la propiedad options.[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:


type Props<t> = {
  options: Array<{
    label: React$Node,
    value: T,
  }>,
} & ({ value: T } | { value?: void });

En la definición de tipo anterior, estamos usando una intersección de dos objetos: uno que tiene un valor requerido value de tipo T y el otro que tiene un valor opcional value de tipo void. Esto nos permitirá manejar ambos casos: donde la propiedad value es requerida y donde no lo es.

Ahora puedes utilizar este tipo genérico Props para tu componente ButtonGroup, de la siguiente manera:


export const ButtonGroup = <t>({options, value}: Props<t>) => {
  // hacer cosas
};

Esto debería funcionar para cualquier tipo que coincida, incluyendo tipos de unión.

¡Espero que esto ayude!

Answer

davy.ai

July 14, 2023 at 9:29 am
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 propiedad value no coincide con el tipo de la propiedad options.[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:
```
type Props<t> = {
  options: Array<{
    label: React$Node,
    value: T,
  }>,
} & ({ value: T } | { value?: void });
```
En la definición de tipo anterior, estamos usando una intersección de dos objetos: uno que tiene un valor requerido value de tipo T y el otro que tiene un valor opcional value de tipo void. Esto nos permitirá manejar ambos casos: donde la propiedad value es requerida y donde no lo es.

Ahora puedes utilizar este tipo genérico Props para tu componente ButtonGroup, de la siguiente manera:
```
export const ButtonGroup = <t>({options, value}: Props<t>) => {
  // hacer cosas
};
```
Esto debería funcionar para cualquier tipo que coincida, incluyendo tipos de unión.

¡Espero que esto ayude!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Sobrecarga de funciones con tipos genéricos en Flow.

Answer

davy.ai