TypeScript 열거형을 JavaScript 배열 또는 문자열로 변환하는 방법

TypeScript 열거형을 JavaScript 배열로 변환하는 것은 매우 쉽습니다. 저는 종종 이를 사용하여 해당 열거형의 모든 값으로 <select>를 채웁니다.

이 게시물에서는 열거형에서 데이터를 빼서 원하는 대로 사용할 수 있도록 JavaScript 문자열 배열로 리모델링하는 방법을 보여드리고자 합니다. 다음으로 애플리케이션 전체에서 재사용할 수 있도록 일반 유틸리티 함수를 만듭니다.

TypeScript 열거형이란 무엇입니까?

예, 열거형을 JavaScript 배열로 전환하기 위한 솔루션을 찾고 있다는 것을 알고 있습니다. 그러나 열거형을 만드는 방법에는 여러 가지가 있다는 것을 알고 계십니까?

1. 숫자 TypeScript 열거형

숫자 열거형은 TypeScript에서 가장 일반적으로 사용됩니다. 이와 같이 숫자 열거형을 만들 수 있습니다. (내가 🍕를 사랑하기 때문에 우리는 PizzaToppings enum을 만듭니다.)

enum PizzaToppings {
  TOMATO, // value = 0
  BBQ, // value = 1
  NONE, // value = 2
  CREAM // value = 3
}

열거형의 첫 번째 키는 값 0, 두 번째 값은 1 등을 가져옵니다. 당신은 그것에 대해 아무것도 할 필요가 없습니다. 하지만 변경하고 싶다면 변경할 수 있습니다.

enum PizzaToppings {
  TOMATO = 1,
  BBQ = 2,
  NONE = 3,
  CREAM = 4
}

이를 통해 열거형의 각 키 값을 정의할 수 있습니다.

2. 문자열 TypeScript 열거형

말했듯이 문자열 열거형은 값이 문자열인 열거형입니다. (I love 🍕 우리는 PizzaSizes enum을 만들기 때문에 XL 😅을 선택합니다.)

enum PizzaSizes {
  Small = "s",
  Medium = "m",
  Large = "l",
  XL = "xl",
  XXL = "XXL"
}

이 열거형을 통해 열거형에서 문자열 값을 가져올 수 있습니다. 응용 프로그램에서 많이 사용하고 문자열 값을 변경해야 하는 경우 매우 편리합니다 😉.

이러한 열거형 멤버는 모두 상수입니다. 그러나 다른 데이터 유형에 의존하고 싶다면 계산하도록 만들 수 있습니다.

enum PizzaSizes {
  Small = "s",
  Medium = "m",
  Large = "l",
  XL = "xl",
  XXL = "XXL"
  Custom = stringValueFromVar.length
}

나는 이것을 사용하지 않았지만 TypeScript documentation에 따라 가능합니다.

3. 이기종 TypeScript 열거형

무엇을 물어볼 수 있습니까? 그런 생각이 들었어요, 하하! 그러나 이는 열거형이 혼합된 값, 문자열 및 숫자를 가질 수 있음을 의미합니다. (어떤 피자를 선호하세요? 비건 피자는 아직 안 먹어봤어요😅)

enum PizzaTypes {
  Vegan = 0,
  NonVegan = "No meat"
}

이제 숫자 값과 문자열 값을 모두 포함하는 PizzaTypes 열거형이 있습니다.

TypeScript Enum에서 단일 값을 얻는 방법?

애플리케이션의 열거형에서 단일 값이 필요한 경우가 있습니다.

고객이 피자를 주문할 때 받는 영수증의 일부를 만들어 봅시다.

enum PizzaFlavours {
  Peperoni = "peperoni",
  Texas= "texas",
  Tuna = "tuna",
  Hawai = "hawai", 
}

enum PizzaToppings {
  TOMATO = 1,
  BBQ = 2,
  NONE = 3,
  CREAM = 4
}

enum PizzaSizes {
  Small = "s",
  Medium = "m",
  Large = "l",
  XL = "xl",
  XXL = "xxl"
}

const receiptTitle = `Pizza ${PizzaFlavours[Peperoni]} ${PizzaSizes[XXl]} with topping ${PizzaToppings[TOMATO] }` 
// value = "Pizza peperoni XXL with topping 1"

실제 시나리오에서 유형 및 특징은 TypeScript에서 열거형으로 정의되지 않고 백엔드 API에서 제공됩니다. 하지만 이 예에서는 훌륭하게 작동합니다.

TypeScript Enum에서 값을 얻는 방법?

이제 TypeScript 열거형에서 값을 가져오는 방법을 알았으므로 여러 값을 JavaScript 배열로 가져오는 목표에 뛰어들 수 있습니다.
Object.keys() 를 사용하면 매우 간단합니다.

Check the CodeSandbox example and slide the preview to left and click console to see the result

예제에서 콘솔이 어레이를 출력하는 것을 볼 수 있습니다. 열거형의 키와 값을 모두 사용하여 .filter() 로 이를 방지할 수 있습니다.

Check the CodeSandbox example and slide the preview to left and click console to see the result

이제 콘솔에서 값의 문자열만 표시되는 것을 볼 수 있습니다.

재사용성을 위한 일반 유틸리티 함수를 만드는 방법

이제 코드가 작동하는 것을 알았으므로 모든 열거형(문자열 및 숫자 열거형 모두)을 JavaScript 배열로 전환할 수 있는 매우 편리한 유틸리티 함수를 만들 수 있습니다.

Check the CodeSandbox example and slide the preview to left and click console to see the result

그리고 이 함수를 사용하면 이 함수가 문자열 및 숫자 열거형 모두에서 작동하는 것을 볼 수 있습니다. 👍

감사!

이 이야기를 읽은 후 새로운 것을 배웠거나 새로운 것을 창조하도록 영감을 받았기를 바랍니다! 🤗 그렇다면 이메일(이 페이지 상단으로 스크롤)을 통해 구독하거나 여기 Hashnode에서 저를 팔로우하세요.

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

질문이나 답장을 남겼다면 아래로 스크롤하여 메시지를 입력하세요. 비공개로 하고 싶을 때 를 보내주세요. 제 디엠은 언제나 열려있습니다😁