web-dev-qa-db-fra.com

Comment corriger l'avertissement de flux: déstructuration (Annotation manquante)

J'écris une petite application React Native et j'essaie d'utiliser Flow, mais je ne peux pas vraiment obtenir un tutoriel approprié à ce sujet, où que ce soit.

Je continue à avoir l'erreur: destructuring (Missing annotation) à propos du ({ station }) dans la 1ère ligne de ce code:

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

station est une réponse json et code et label sont strings dans ce json .

Comment corriger l'erreur/l'avertissement?

javascriptreactjsreact-nativeflowtype
22
jbssm

J'écrirais ceci comme

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

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

Il est nécessaire de déclarer le type du paramètre d'objet accepté par la fonction.

31
John

J'ai essayé votre exemple et obtenu No errors!, car Flow ne nécessite pas d'annotations de type sur les fonctions privées.

Si à la place j'ajoute une export comme ceci:

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

Je reçois l'erreur suivante. (Ce qui, je suppose, est assez proche de ce que vous voyez.)

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


Found 1 error

Vous pouvez résoudre ce problème d'au moins deux manières. La meilleure façon consiste à ajouter une annotation de type pour l'argument de la fonction. Par exemple:

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

ou

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

ou même

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 vous voulez vous assurer que la StationDetail est toujours appelée avec un objet Radio approprié même si l'implémentation actuelle ne regarde que le champ station.

L'autre alternative consiste à remplacer le premier commentaire par // @flow weak et à laisser Flow déduire le type d'argument lui-même. Less Good ™, car il est plus facile de changer accidentellement votre API publique et de rendre vos intentions moins claires.

5
aij

Pour que le travail de déstructuration d’objet soit effectué, vous devez fournir les structures d’objet appropriées à droite de l’affectation. Dans ce cas particulier, {station} en tant qu'argument de la fonction (côté gauche de l'affectation) devrait être alimenté par quelque chose comme {station:{code: "stg", label:"stg"}}. Assurez-vous d'appeler la fonction StationDetail avec un objet approprié comme argument, par exemple.

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

StationDetail(data);

0
Redu