フローでの列挙型の使用

投稿日: 2022-04-20 2022-10-06
タグ: React

従来のオブジェクト指向言語（C、C＃、Java）に触れたことがある場合は、おそらく列挙型のデータ型を見たことがあるでしょう。 JavaScriptは列挙型をサポートしていませんが、Flowのタイプチェックはそれを補うことができます。

列挙はどこで役に立ちますか？

ポーカーチップを扱うプログラムを書いているとしましょう。チップの色はひもです（すなわち「赤」、「青」など）。だからあなたの Chip タイプは次のようになります。

type Chip = {
  color: string,
};

…そしてチップを作成する関数は次のようになります。

function createChip(color: string): Chip {
  return {
    color,
  };
}

ただし、有効な色のみを使用していることを確認する必要があります。

// This should be valid.
createChip('red');
// This should not.
createChip('cyan');
// This isn't even a color.
createChip('Nicomachean Ethics');

列挙型の作成

列挙型を定義する最も簡単な方法は、文字列リテラルの和集合としてです。

// 'red', 'blue', and 'green' are valid colors.
type Color = 'red' | 'blue' | 'green';

ここから、タイプを使用できます Color 代わりに string:

type Chip = {
  // `color` can only be a valid color.
  color: Color,
};

// `createChip` only takes values of type `Color`.
function createChip(color: Color): Chip {
  return {
    color,
  };
}

既存の値から列挙型を作成する

ポーカーチップは色によって価値があります。したがって、プロジェクトのどこかに値を検索するオブジェクトがあるとしましょう。

const chipValues = {
  red: 5,
  blue: 10,
  green: 25,
};

The Color タイプはのキーを繰り返しています chipValues 3つしかない場合はそれほど悪くはありませんが、それでも重複しているため、さらに追加すると煩わしくなります。フローは、オブジェクトのキーから列挙型を導出する方法を提供します。 $Keys タイプ：

type Color = $Keys<typeof chipValues>;

getdocs

13036