Typescript에서 열거형을 만드는 다른 방법

(이 문서의 최종 코드는 사용할 수 있습니다in the playground.)

오늘 우리는 enum의 멋진 기능인 typescript와 이를 사용하는 동안 발생할 수 있는 몇 가지 문제와 이를 극복하는 방법을 살펴보겠습니다.

열거형을 사용할 수 있는 무언가를 제공하는 API와 통신하는 일부 프런트엔드 애플리케이션을 구축한다고 가정해 보겠습니다. 예를 들어 카드가 될 수 있습니다. enum로 나타낼 수 있는 4가지 수트가 있습니다.

enum SuitsEnum {
  Clubs = '♣️',
  Spades = '♠️',
  Diamonds = '♦️',
  Hearts = '♥️',
}

그리고 이름과 슈트가 있는 무작위 카드를 제공하는 API가 있습니다.

interface Card {
  name: string;
  suit: SuitsEnum;
}

깔끔해 보입니다. 그런 다음 테스트 데이터를 발명하지 않고 단위 테스트를 작성하기로 결정하고 API에 요청을 전송하여 생성하기로 결정합니다. imaginaryapi/the-only-card-i-need-is에 대한 요청을 수행하고 임의의 카드를 얻습니다.

{
    "name": "Ace", 
    "suit": "♠️"
}

좋습니다. 테스트의 변수에 입력해 보겠습니다.

const card: Card ={
  name: 'Ace',
  suit: '♠️'
}

그렇게 하려고 하면 ♠ 가 SuitsEnum 에 있는 정확한 값임에도 불구하고 SuitsEnum.Spades 유형에 할당할 수 없는 문제에 즉시 부딪힙니다.

물론 우리는 그것을 @ts-ignore 할 수 있고, as unknown as SuitsEnum 또는 ♠를 SuitsEnum.Spades로 대체할 수 있습니다. 그러나 이 모든 것은 추악한 솔루션 및 해결 방법입니다.

그러면 무엇을 할 수 있습니까? 우리는 enum 를 '♣️' | '♠️' | '♦️' | '♥️' 로 바꿀 수 있지만 그렇게 하면 enum 가 제공하는 유연성을 잃게 됩니다.

본질적으로 여기서 문제는 enum가 유형과 값을 모두 결합한다는 것입니다. 그러나 카드 요구 사항에 맞게 사용할 수 있는 값과 유형이 분리된 열거형에 대한 대안을 만들 수 있습니다.
as const 어설션으로 시작하여 카드 수트 열거를 생성합니다.

const SUITS = <const>{
  Clubs: '♣️',
  Spades: '♠️',
  Diamonds: '♦️',
  Hearts: '♥️',
};

이들은 기본적으로 우리enum의 가치 부분입니다. 그들과 함께 type를 구축할 수 있습니다.

type Suit = (typeof SUITS)[keyof typeof SUITS];

이제 새 유형Suit으로 입력된 모든 항목은 해당 값에 해당하는 SUITS 객체 또는 일반 문자열의 값을 사용할 수 있으므로 우리의 경우 enum보다 더 유연합니다. 다음을 확인하십시오.

const hearts: Suit = SUITS.Hearts; // ok
const spades: Suit = '♠️'; // ok

즉, API에서 오는 항목을 입력하기 위해 이 새로운 유형을 사용할 수 있습니다.

interface Card {
  name: string;
  suit: Suit;
}

const card: Card ={
    name: 'Ace',
    suit: '♠️'
}

더러운 속임수가 아니라 언어 초강대국입니다 :)