TypeScript로 작업할 때 공용체 유형과 해당 유형의 가능한 모든 값을 포함하는 배열을 정의해야 할 수도 있습니다. 일반적인 접근 방식은 다음과 같이 작성하는 것입니다.

type Taste = 'しょうゆ' | 'みそ' | 'とんこつ';
const tastes = ['しょうゆ', 'みそ', 'とんこつ'];

얼핏 보면 괜찮은 것 같습니다. 그러나 여기에는 숨겨진 문제가 있습니다. 옵션을 변경하거나 추가할 때마다 Taste 조합 유형과 Taste 배열을 모두 업데이트해야 합니다. 이러한 노력의 중복은 실수로 이어질 수 있으며 코드 유지 관리를 더욱 지루하게 만듭니다.

다행히도 중복성을 줄여 이를 단순화할 수 있는 방법이 있습니다. TypeScript에서 as const 어설션과 typeof를 사용하면 공용체 유형과 배열의 정의를 한 곳에 통합할 수 있습니다. 위 코드를 리팩터링하는 방법은 다음과 같습니다.

const tastes = ['しょうゆ', 'みそ', 'とんこつ'] as const;
type Taste = (typeof tastes)[number];

이 접근 방식에는 여러 가지 이점이 있습니다.

1. 단일 정보 소스:
   
   맛 배열에서 값 목록을 한 번만 정의합니다. Taste 유형은 이 배열에서 자동으로 파생되므로 목록을 업데이트해야 하는 경우 한 곳에서만 수행하면 됩니다.

2. 유형 안전:
   
   const로 사용하면 TypeScript는 맛 배열을 문자열 배열 대신 리터럴 유형이 있는 튜플로 처리합니다. 이렇게 하면 Taste 유형이 정확하게 유지되고 Taste 값과 일치하게 됩니다.

3. 더 나은 유지 관리:
   
   Taste 유형은 배열에서 생성되므로 유형과 실제 값이 일치하지 않을 위험이 없습니다. 이렇게 하면 버그 가능성이 줄어들고 코드 유지 관리가 더 쉬워집니다.

사용 사례 예시

이제 코드에서 Taste 유형을 사용할 때마다 맛 배열의 값과 일치하는 것이 보장됩니다.

function describeTaste(taste: Taste): string {
  switch (taste) {
    case 'しょうゆ':
      return 'Savory soy sauce flavor.';
    case 'みそ':
      return 'Rich miso flavor.';
    case 'とんこつ':
      return 'Creamy pork broth flavor.';
    default:
      return 'Unknown taste';
  }
}

const allTastes: Taste[] = tastes; // Safe, because they match the type!

이 패턴은 코드의 가독성을 향상시킬 뿐만 아니라 특히 동기화를 유지해야 하는 여러 값을 처리할 때 오류 발생 가능성을 줄여줍니다.

이 전략을 수용하면 TypeScript 코드를 더욱 유지 관리하고 확장 가능하게 만들 수 있습니다. 이는 대규모 값 집합을 처리하거나 시간이 지남에 따라 코드베이스가 커질 때 특히 유용합니다.