Reaccionar PropTypes vs.Flujo

PropTypes y Flow cubren cosas similares pero utilizan enfoques diferentes. PropTypes puede darle advertencias durante el tiempo de ejecución, lo que puede ser útil para encontrar rápidamente respuestas mal formadas provenientes de un servidor, etc. Sin embargo, Flow parece ser el futuro y con conceptos como genéricos es una solución muy flexible. Además, el autocompletado que ofrece Nuclide es una gran ventaja para Flow.

Mi pregunta ahora es cuál es la mejor manera de hacerlo cuando se inicia un nuevo proyecto. ¿O podría ser una buena solución utilizar Flow y PropTypes? El problema de usar ambos es que escribe mucho código duplicado. Este es un ejemplo de una aplicación de reproductor de música que escribí:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Ambas definiciones contienen básicamente la misma información y cuando se cambia el tipo de datos, ambas definiciones deben actualizarse.

Encontré este complemento de babel para convertir declaraciones de tipo a PropTypes, lo que podría ser una solución.

Un año después de hacer esta pregunta, quería dar una actualización sobre cómo mis experiencias con este problema.

Como Flow evolucionó mucho, comencé a escribir mi código base con él y no agregué ninguna nueva definición de PropType. Hasta ahora, creo que este es un buen camino a seguir, porque como se mencionó anteriormente, le permite no solo escribir accesorios sino también otras partes de su código. Esto es muy útil, por ejemplo, cuando tiene una copia de sus accesorios en el estado, que el usuario puede modificar. Además, la finalización automática en IDE es una ganancia increíble.

Los convertidores automáticos en una u otra dirección realmente no despegaron. Entonces, para nuevos proyectos, ahora realmente recomendaría usar Flow sobre PropTypes (en caso de que no quiera escribir dos veces).

Aparte de que ambos pertenecen al amplio campo de la verificación de tipos, no hay mucha similitud entre los dos.

Flow es una herramienta de análisis estático que utiliza un superconjunto del lenguaje, lo que le permite agregar anotaciones de tipo a todo su código y detectar una clase completa de errores en el momento de la compilación.

PropTypes es un verificador de tipos básico que se ha parcheado en React. No puede verificar nada más que los tipos de accesorios que se pasan a un componente determinado.

Si desea una verificación de tipo más flexible para todo su proyecto, Flow / TypeScript son las opciones adecuadas. Siempre que solo pase tipos anotados a componentes, no necesitará PropTypes.

Si solo desea verificar los tipos de accesorios, no complique demasiado el resto de su base de código y elija la opción más simple.

Creo que el punto perdido aquí es que Flow es un verificador estático, mientras que PropTypes es un verificador de tiempo de ejecución , lo que significa

• El flujo puede interceptar errores en sentido ascendente durante la codificación: teóricamente puede pasar por alto algunos errores que no conoce (si no implementó el flujo lo suficiente en su proyecto, por ejemplo, o en el caso de objetos anidados profundos)
• PropTypes los detectará aguas abajo durante la prueba, por lo que nunca se perderá

Intente declarar el tipo de accesorios usando solo Flow. Especifique un tipo incorrecto, como número en lugar de cadena. Verá que esto se marcará en el código que usa el componente dentro de su editor compatible con Flow. Sin embargo, esto no hará que falle ninguna prueba y su aplicación seguirá funcionando.

Ahora agregue el uso de React PropTypes con un tipo incorrecto. Esto HARÁ que las pruebas fallen y se marquen en la consola del navegador cuando se ejecute la aplicación.

En base a esto, parece que incluso si se usa Flow, también se deben especificar PropTypes.