タイプスクリプトのキー値定数の管理

アプリケーションにはドロップダウンメニューがあります.以下のようなフォームコントロールを想像しましょう

通常、各選択メニューの項目にはidとlabelがあります.IDは他のコンポーネント、サービス、またはサーバー側と通信する責任があります.ラベルはユーザのテキストを表示する責任があります.
このポストは、そのラベルのIDとマッピングを持つメニュー項目の定数を管理する方法を説明します.これはas const v 3以降の特徴4 .

コロのタプルを定義する

タイプスクリプトでは、タプルは配列ですが、その長さと項目は固定されます.タプルを定義することができますas const 配列リテラルのディレクティブ.( as const ディレクティブが必要です
クリエイトcolors.ts と定義colorIDs タプル

export const colorIDs = ['green', 'red', 'blue'] as const;

種類colorIDs がstring[] でも['green', 'red', 'blue'] . その長さはcolorIDs[0] 常に'green' . これはタプルです!

カライド型

タプル型は、そのユニオン型に変換できます.この場合、あなたは得ることができます'green' | 'red' | 'blue' タプルから入力します.
行を加えるcolors.ts 下記同様

export const colorIDs = ['green', 'red', 'blue'] as const;

type ColorID = typeof colorIDs[number]; // === 'green' | 'red' | 'blue'

混乱?心配するな.それは魔法ではない.colorIDs[number] は「数でアクセスできるフィールド」を意味する'green' , 'red' , or 'blue' .
So typeof colorIDs[number] ユニオンタイプ'green' | 'red' | 'blue' .

colorlabelマップを定義する

colorLabels マップは以下のようなオブジェクトです

const colorLabels = {
  blue: 'Blue',
  green: 'Green',
  red: 'Red',
};

だってcolorLabels 明示的な型がない場合でも、red 'sラベル.
それを確認しましょうcolorLabels すべての色の完全なラベルセット!ColorID それを助けることができます.
タイプスクリプトは私たちを与えるRecord キー値マップオブジェクトを定義する型.キーはColorID 値は文字列です.So colorLabels 's型Record<ColorID, string> .

export const colorIDs = ['green', 'red', 'blue'] as const;

type ColorID = typeof colorIDs[number];

export const colorLabels: Record<ColorID, string> = {
  green: 'Green',
  red: 'Red',
  blue: 'Blue',
} as const;

ときに定義を逃したred フィールド、TypeScriptコンパイラはオブジェクトにエラーをスローします.

ちなみに角度V 8.0 +はtypescript v 3と互換性があります.上記のデモアプリは以下の通りです

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

import { colorIDs, colorLabels } from './colors';

@Component({
  selector: 'app-root',
  template: `
    <label for="favoriteColor">Select Favorite Color:&nbsp;</label>
    <select id="favoriteColor" [formControl]="favoriteColorControl">
      <option *ngFor="let id of colorIDs" [ngValue]="id">
        {{ colorLabels[id] }}
      </option>
    </select>
    <div>Selected color ID: {{ favoriteColorControl.value }}</div>
  `,
})
export class AppComponent {
  readonly colorIDs = colorIDs;
  readonly colorLabels = colorLabels;

  readonly favoriteColorControl = new FormControl(this.colorIDs[0]);
}

結論

as const 配列をタプルにする

typeof colorIDs[number] その項目のunion型を返す

オブジェクトを定義するRecord<ColorID, string> 完全なフィールドを設定するため.