Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

392
Views
How to correct flow warning: destructuring (Missing annotation)

I'm writing a small React Native app and I'm trying to use Flow, but I can't really get a proper tutorial about it anywhere.

I keep getting the error: destructuring (Missing annotation) about the ({ station }) in the 1st line of this code:

const StationDetail = ({ station }) => {
  const {
    code,
    label,
  } = station;

station is a json response and code and label are strings inside that json.

How do I fix the error/warning?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

I would write this as

type StationType = {
  code: String,
  label: String,
}

function StationDetail({ station } : {station : StationType}) => {
  const {
    code,
    label,
} = station;

It's necessary to declare the type of the object parameter that the function accepts.

over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report

0

In order the object destructuring work you should provide the appropriate object structures on the right side of the assignment. In this particular case {station} as the function argument (left side of the assignment) should be fed by something like {station:{code: "stg", label:"stg"}}. Make sure you are calling the StationDetail function with an appropriate object as argument like.

var StationDetail = ({ station }) => {
  var {code, label} = station;
  console.log(code,label);
},
    data = {station: {code: 10, label:"name"}};

StationDetail(data);

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!