フロー内のマップとしてのオブジェクト

投稿日: 2022-04-20 2022-04-20

Map タイプの出現にもかかわらず、プレーンオブジェクトはマップを表す非常に一般的な方法です。このパラダイムをサポートするために、Flowはこれを表現するための非常に柔軟な方法を提供します。

オブジェクトマップが役立つ場所

食料品リストのコストを合計する関数を作成するとします。呼び出すと、次のようになります。

// This would return 9.5 (4 + 3 + 2.5).
getTotalCost({
  eggs: 4,
  fruitSnacks: 3,
  toothpaste: 2.5,
});

リストには任意の数のアイテムを含めることができるため、各アイテムをプロパティとして明示的に宣言することはできません。また、数字だけを取るようにしたいので、次のようにします。

getTotalCost({
  eggs: 4,
  toothpaste: 2.5,
  milk: 'Too much',
});

…タイプエラーが発生します。

タイプをオブジェクトマップとして宣言する

Flowの多くのものと同様に、それは非常に単純です。型付きキーを角かっこで囲んで宣言し、型を指定するだけです。

type GroceryList = {
  // The keys of the object will be strings.  The values will be numbers.
  [name: string]: number,
};

// From there, use it as any other type.
function getTotalCost(groceryList: GroceryList): number {
  // Take the value of each property, return the sum.
}

getTotalCostは、文字列キーに数値が含まれるオブジェクトを受け入れ、それ以外の場合は型エラーを出します。

// This works.
getTotalCost({
  eggs: 4,
  fruitSnacks: 3,
  toothpaste: 2.5,
});

// Also okay.
getTotalCost({});

// Nope.
getTotalCost({
  eggs: 4,
  toothpaste: 2.5,
  milk: 'Too much',
});

getdocs

13036