TypeScript에서 키-값 상수 관리

많은 응용 프로그램에는 양식에 드롭다운 선택 메뉴가 있습니다. 아래와 같은 폼 컨트롤을 상상해 봅시다.



일반적으로 각 선택 메뉴의 항목에는 ID와 레이블이 있습니다. ID는 다른 구성 요소, 서비스 또는 서버 측과의 통신을 담당합니다. 레이블은 사용자에게 텍스트를 표시하는 역할을 합니다.

이 게시물은 레이블에 대한 ID와 매핑이 있는 메뉴 항목에 대한 상수를 관리하는 방법에 대해 설명합니다. v3.4부터 도입된 TypeScript의 as const 기능을 사용합니다.

colorID 튜플 정의

TypeScript에서 튜플은 배열이지만 길이와 항목은 고정되어 있습니다. 배열 리터럴에서 as const 지시문을 사용하여 튜플을 정의할 수 있습니다. ( as const 지시문에는 TypeScript 3.4 이상이 필요함)

다음과 같이 튜플을 만들고colors.ts 정의합니다colorIDs.

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

colorIDs의 유형은 string[]가 아니라 ['green', 'red', 'blue']입니다. 길이는 절대적으로 3이고 colorIDs[0]는 항상 'green'입니다. 이것은 튜플입니다!

ColorID 유형 추출

Tuple 유형은 해당 항목의 공용체 유형으로 변환될 수 있습니다. 이 경우 튜플에서 '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' 또는 'blue' 입니다.

따라서 typeof colorIDs[number]는 합집합 유형 'green' | 'red' | 'blue'이 됩니다.

colorLabels 맵 정의

colorLabels 지도는 아래와 같은 객체입니다.

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

colorLabels에는 명시적인 유형이 없기 때문에 red의 레이블을 정의하지 않아도 알 수 없습니다.
colorLabels에 모든 색상의 완전한 레이블 세트가 있는지 확인하십시오! ColorID가 도움이 될 수 있습니다.

TypeScript는 키-값 맵 개체를 정의하는 유형Record을 제공합니다. 키는 ColorID이고 값은 문자열입니다. 따라서 colorLabels 의 유형은 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 컴파일러는 개체에 오류를 발생시킵니다.



그런데 Angular v8.0+는 TypeScript v3.4와 호환됩니다. 위의 데모 앱은 다음과 같습니다.

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] 항목의 통합 유형을 반환합니다

.

전체 필드 집합을 유지하기 위해 Record<ColorID, string>로 개체를 정의합니다.