Как исправить предупреждение о потоке: деструктурирование (Отсутствует аннотация)

Я пишу небольшое приложение React Native, и я пытаюсь использовать Flow, но я не могу получить правильное руководство об этом в любом месте.

Я продолжаю получать ошибку: destructuring (Missing annotation) о ({ station }) в первой строке этого кода:

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

station является json-ответом, а code и label являются strings внутри json.

Как исправить ошибку/предупреждение?

Ответ 1

Я бы написал это как

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

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

Необходимо объявить тип параметра объекта, который принимает функция.

Ответ 2

Я попробовал ваш пример и получил No errors!, потому что Flow не требует аннотаций типа для частных функций.

Если вместо этого я добавлю export следующим образом:

// @flow
export const StationDetail = ({ station }) => {
  const {
    code,
    label,
  } = station;
  return code + label;
};

Я получаю следующую ошибку. (Что я предполагаю, достаточно близко к тому, что вы видите.)

Error: 41443242.js:2
  2: export const StationDetail = ({ station }) => {
                                   ^^^^^^^^^^^ destructuring. Missing annotation


Found 1 error

Вы можете решить это, по крайней мере, двумя способами. Лучше всего добавить аннотацию типа для аргумента функции. Например:

export const StationDetail =
  ({ station }: { station: { code: number, label: string } }) =>

или

export const StationDetail =
  ({ station }: {| station: {| code: string, label: string |} |}) =>

или даже

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) =>
  ...

если вы хотите убедиться, что StationDetail всегда вызывается с правильным объектом Radio, хотя текущая реализация просматривает только поле station.

Другой альтернативой является изменение первого комментария на // @flow weak, и пусть Flow выведет тип аргумента на свой собственный. Это Less Good ™, потому что это облегчает случайное изменение вашего общедоступного API и делает ваши фактические намерения менее ясными.

Ответ 3

Чтобы выполнить деструктуризацию объекта, вы должны предоставить соответствующие структуры объектов в правой части задания. В этом конкретном случае {station} в качестве аргумента функции (левая часть задания) должно подаваться нечто вроде {station:{code: "stg", label:"stg"}}. Убедитесь, что вы вызываете функцию StationDetail с соответствующим объектом в качестве аргумента.

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

StationDetail(data);