I tried your example and got No errors!
, because Flow doesn't require type annotations on private functions.
If instead I add an export
like this:
// @flow
export const StationDetail = ({ station }) => {
const {
code,
label,
} = station;
return code + label;
};
I get the following error. (Which I assume is close enough to what you are seeing.)
Error: 41443242.js:2
2: export const StationDetail = ({ station }) => {
^^^^^^^^^^^ destructuring. Missing annotation
Found 1 error
You can solve that in at least two ways. The better way is to add a type annotation for the function argument. For example:
export const StationDetail =
({ station }: { station: { code: number, label: string } }) =>
or
export const StationDetail =
({ station }: {| station: {| code: string, label: string |} |}) =>
or even
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) =>
...
if you want to make sure the StationDetail
is always called with a proper Radio object even though the current implementation only looks at the station
field.
The other alternative is to change the first comment to // @flow weak
and let Flow infer the argument type on it's own. That is Less Good™ because it makes it easier to accidentally change your public API and makes your actual intentions less clear.
{'code': code, 'label': label}
no ?flow
I don't know, but in plain JS React Native is fine that way....const {code:string, label:string}...