Estoy escribiendo una pequeña aplicación React Native y estoy tratando de usar Flow, pero realmente no puedo obtener un tutorial adecuado al respecto en ninguna parte.
Sigo recibiendo el error: destructuring (Missing annotation) sobre ({ station }) en la primera línea de este código:
const StationDetail = ({ station }) => { const { code, label, } = station; station es una respuesta json y code y la label son strings dentro de ese json .
¿Cómo soluciono el error/advertencia?
Escribiría esto como
type StationType = { code: String, label: String, } function StationDetail({ station } : {station : StationType}) => { const { code, label, } = station;Es necesario declarar el tipo de parámetro del objeto que acepta la función.
¡Probé tu ejemplo y No errors! , porque Flow no requiere anotaciones de tipo en funciones privadas.
Si en cambio agrego una export como esta:
// @flow export const StationDetail = ({ station }) => { const { code, label, } = station; return code + label; };Obtuve el siguiente error. (Lo que supongo que está lo suficientemente cerca de lo que estás viendo).
Error: 41443242.js:2 2: export const StationDetail = ({ station }) => { ^^^^^^^^^^^ destructuring. Missing annotation Found 1 errorPuedes resolver eso al menos de dos maneras. La mejor manera es agregar una anotación de tipo para el argumento de la función. Por ejemplo:
export const StationDetail = ({ station }: { station: { code: number, label: string } }) =>o
export const StationDetail = ({ station }: {| station: {| code: string, label: string |} |}) =>o incluso
type Code = 1 | 2 | 3 | 4 | 5 | 6; type Radio ={| station: {| code: Code, label: string |}, signalStrength: number, volume: number, isMuted: bool, |}; export const StationDetail = ({ station }: Radio) => ... si desea asegurarse de que StationDetail siempre se llame con un objeto Radio adecuado aunque la implementación actual solo mire el campo de la station .
La otra alternativa es cambiar el primer comentario a // @flow weak y dejar que Flow deduzca el tipo de argumento por sí solo. Eso es Less Good™ porque hace que sea más fácil cambiar accidentalmente su API pública y hace que sus intenciones reales sean menos claras.
Para que la desestructuración de objetos funcione, debe proporcionar las estructuras de objeto adecuadas en el lado derecho de la tarea. En este caso particular, {station} como argumento de función (lado izquierdo de la asignación) debe ser alimentado por algo como {station:{code: "stg", label:"stg"}} . Asegúrese de llamar a la función StationDetail con un objeto apropiado como argumento.
var StationDetail = ({ station }) => { var {code, label} = station; console.log(code,label); }, data = {station: {code: 10, label:"name"}}; StationDetail(data);