演習 - 列挙型

完了

TypeScript で使用できるさまざまなデータ型と、それらがコードに与える効果について調べましょう。

列挙型

JavaScript の標準データ型セットに追加されていて役に立つのが、列挙型 (enum) です。

列挙型を使用すると、一連の関連する定数を簡単に操作できます。 enum は、値のセットに対するシンボリック名です。 列挙型はデータ型扱いであり、これを使用することで、変数やプロパティと共に使用する一連の定数を作成することができます。

プロシージャで受け取れる変数の個数が限られている場合には、必ず列挙型の使用を検討してください。 列挙型を使用すると、コードの明瞭さと読みやすさが増します。わかりやすい名前を使用すると特に効果的です。

列挙型を使用すると、次のような効果があります。

  • 数の入れ替えや入力間違いによるエラーを減らすのに役立ちます。
  • 値を後で変更しやすくなります。
  • コードが読みやすくなり、コードにエラーが紛れ込む可能性を抑えられます。
  • 上位互換性を確保できます。 列挙型を使用すると、今後だれかがメンバー名に対応する値を変更した場合に、コードでエラーが発生する確率が小さくなります。

列挙型の作成

列挙型を使用すると、使用可能なオプションのリストを指定できます。 特定の変数の種類が取り得る値のセットがある場合に特に便利です。 たとえば、外部データベースに ContractStatus という名前のフィールドがあり、PermanentTempApprentice という契約の状態を表す値 1、2、3 が含まれているとします。 これらの値を使って列挙型を作成し、TypeScript によるサポートを調べます。

  1. プレイグラウンドを開き、既存のコードをすべて削除します

  2. 次のコードを入力して、このシナリオを表す enum を作成します。

    enum ContractStatus {
         Permanent,
         Temp,
         Apprentice
    }
    
  3. ここで、新しい従業員のために employeeStatus という名前で ContractStatus 型の変数を宣言し、"Temp" を割り当てます。 結果をコンソールに表示します。

    let employeeStatus: ContractStatus = ContractStatus.Temp;
    console.log(employeeStatus);
    
  4. [実行] を選択します。 [ログ] ウィンドウに表示される値にご注意ください。 どのような値が返されますか?

  5. 既定では、enum の値は 0 から始まるので、Permanent は 0、Temp は 1、Apprentice は 2 になります。 異なる値で始めたい場合は (この例では 1)、enum 宣言でそれを指定します。 enum を値 1 から始めるには、次のように編集します。

    enum ContractStatus {
         Permanent = 1,
         Temp,
         Apprentice
    }
    
  6. [実行] を選択して、コードを再び実行します。 表示される値が今度は 2 であることに注目してください。

  7. 列挙値に関連付けられている名前を表示するには、指定されたインデクサーを使用できます。 コードの最後に以下を追加します。

    console.log(ContractStatus[employeeStatus]);
    
  8. コードを実行します。 Temp という値が表示されることに注目してください。これは、列挙値 2 に関連付けられている名前です。