web-dev-qa-db-ja.com

フロー警告を修正する方法：破壊（注釈の欠落）

私は小さなReact Nativeアプリを書いています。Flowを使用しようとしていますが、実際にはそれに関する適切なチュートリアルをどこでも入手できません。

エラーが発生し続けます：destructuring (Missing annotation) about ({ station })このコードの1行目：

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

stationはjson応答であり、codeとlabelはその内部にあるstringsですjson。

エラー/警告を修正するにはどうすればよいですか？

javascriptreactjsreact-nativeflowtype
24
jbssm

私はこれを

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

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

関数が受け入れるオブジェクトパラメータの型を宣言する必要があります。

38
John

Flowはプライベート関数で型注釈を必要としないため、あなたの例を試してNo errors!を得ました。

代わりに、次のような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

これは少なくとも2つの方法で解決できます。より良い方法は、関数の引数に型注釈を追加することです。例えば：

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フィールドのみを参照している場合でも、stationが常に適切なRadioオブジェクトで呼び出されるようにする場合。

もう1つの方法は、最初のコメントを// @flow weakに変更し、Flowが独自に引数の型を推測できるようにすることです。それは、パブリックAPIを誤って変更しやすくなり、実際の意図が明確にならないため、Less Good™です。

7
aij

オブジェクトを破壊するためには、割り当ての右側に適切なオブジェクト構造を提供する必要があります。この特定のケースでは{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);
0
Redu