열거형이라고도 하는 열거형은 불연속적인 값의 집합을 묘사할 수 있는 구성 구조로, 각 값은 이름으로 구분됩니다.

열거형은 미리 결정된 값 모음을 상수로 기호화할 수 있는 기회를 제공하므로

열거형 만들기

열거형은 일반적으로 특정 도메인 내에서 가능한 선택지를 미리 정의된 대안 집합으로 제한하는 데 활용됩니다. 대표적인 예로 빨강, 노랑, 파랑에 대한 정의된 값으로 구성된 원색을 포함하는 열거형을 들 수 있습니다.

열거형은 고유 식별자와 연관된 속성의 조합으로 고유한 값의 집합을 나타내는 데 사용됩니다. 식별자는 항상 알파벳 문자열로 지정되며 속성은 임의의 정수, 문자 문자열 또는 런타임에 평가되는 표현식일 수 있습니다.

열거형(열거형)은 TypeScript 프로그래밍 언어 내에서 “열거형” 키워드를 사용하여 설정할 수 있으며, 그 뒤에 열거형의 지정된 이름과 구성 요소를 포함하는 중괄호 {} 집합이 뒤따릅니다. JavaScript 명명법에 적용되는 일반적인 규칙에 따르면 열거형 이름은 대문자로 시작하는 것이 좋습니다.

 enum Direction {
  Up,
  Down,
  Left,
  Right
}

위, 아래, 왼쪽, 오른쪽의 네 멤버로 구성된 Direction이라는 이름의 열거형을 살펴봅시다.

이 코드는 초기값이 없는 배열을 지정하며, 함수에서 참조할 때 TypeScript는 시퀀스 내 위치에 따라 기본값을 제공합니다. 구체적으로 첫 번째 요소에는 “Up” 값이 할당되고, 후속 요소에는 이전 인덱스에서 1씩 증가된 값이 할당됩니다. 이 동작은 다음과 같이 표현할 수도 있습니다:

 enum Direction {
  Up = 0,
  Down = 1,
  Left = 2,
  Right = 3,
}

특정 변수에 대해 특정 값을 지정하는 동시에 이전에 지정하지 않은 값은 그대로 계속 증가하도록 허용할 수 있습니다.

 enum Status {
  Active = 9,
  Inactive, // 10
}

이 문은 특히 숫자 값으로만 구성된 열거형과 관련이 있으며, 이러한 열거형에는 적용 가능하지만 숫자가 아닌 요소나 다양한 요소가 포함된 열거형에는 적용되지 않습니다.

열거형의 다양한 유형

타입스크립트에서 열거형은 열거형을 구성하는 값의 유형에서 파생된 고유한 유형을 갖습니다. 열거형 중 일반적으로 사용되는 것은 숫자 열거형이며, 그 연산은 앞서 설명했지만 두 가지 변형이 존재합니다.

이 글도 확인해 보세요:  HTTP와 HTTPS: 차이점은 무엇인가요?

문자열 열거형

모든 구성 요소가 문자열인 열거형을 문자열 열거형이라고 합니다.숫자 인클로저와 달리, 이러한 인클로저의 값이 명시적으로 지정되지 않은 경우 모든 컴포넌트는 문자열 값을 할당하여 초기화해야 합니다.

 enum PrimaryColors {
  Red = "RED",
  Yellow = "YELLOW",
  Blue = "BLUE"
}

문자열 열거형에는 자동으로 값이 증가하는 속성이 없지만, 그 값이 계속해서 설명적인 상태로 유지되고 멤버 지정이 없어야 하므로 직렬화 목적에 더 적합한 것으로 판명될 수 있습니다. 반대로 일련의 숫자 값이 반드시 자명하지 않을 수도 있습니다.

이기종 열거형

이기종 열거형은 숫자 요소와 알파벳 요소를 모두 포함하는 열거형 형태입니다. 예를 들어

 enum Result {
  Success = "SUCCESS",
  Failure = 0
}

이기종 열거형은 각 멤버의 특정 컨텍스트나 의미에 따라 다른 값 유형이 필요한 열거형 멤버가 있을 때 유용합니다. 그러나 TypeScript 문서 에서는 이기종 열거형은 코드가 복잡해져 오류가 발생하기 쉬우므로 사용을 권장하지 않습니다.

계산 및 상수 열거형 멤버

각 열거형(열거형) 멤버는 불변이거나 계산적으로 파생될 수 있는 지정을 갖습니다.

상수 열거형 멤버

열거형(열거형) 멤버가 다음 기준 중 하나 이상을 충족하는 경우 상수로 간주됩니다.

열거형의 첫 번째 값에 이니셜라이저가 없으므로 특정 메서드나 프로세스를 통해 할당되었을 수 있는 후속 값과 구별됩니다.

앞서 언급한 문은 해당 변수 또는 매개 변수에 할당된 초기 값이 없으며 이전 값이 숫자 상수인 열거형 유형임을 나타냅니다.

프로그램이 이니셜라이저로 표현되는 열거 상수로 시작됩니다.

TypeScript 문서에 설명된 대로 열거형 상수는 컴파일 중에 완전히 평가할 수 있는 다양한 표현식을 포함합니다. 이러한 표현식의 예시에는 문자열과 숫자 리터럴이 포함됩니다.

다음 코드 스니펫에 표시된 열거형의 구성 요소는 불변입니다.

 // CASE 1
enum Direction {
  Up,
  Down,
  Left,
  Right
}

// CASE 2
enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

// CASE 3
enum Season {
  Spring = "SPRING",
  Summer = "SUMMER",
  Autumn = "AUTUMN",
  Winter = "WINTER"
}

상수 열거형을 표준 JavaScript로 컴파일하면 결과 코드는 해당 열거형의 내재값 표현을 사용하므로 성능 측면에서 이점이 있고 디버깅 프로세스가 간소화됩니다.

이 글도 확인해 보세요:  판다와 폴라: 성능 대결

다음은 앞서 언급한 계절 열거형을 개선한 렌더링입니다: “`csharp public enum Season { winter(1), spring(2), summer(3), fall(4); private int index; private Season(int index) { this.index = index; } public int getIndex() { index를 반환합니다; } }

 var Season;
(function (Season) {
    Season["Spring"] = "SPRING";
    Season["Summer"] = "SUMMER";
    Season["Autumn"] = "AUTUMN";
    Season["Winter"] = "WINTER";
})(Season || (Season = {}));

계산된 열거형 멤버

표현식이나 기타 동적 평가와 같은 계산을 통해 열거형에 값을 할당할 수 있을까요? 대답은 ‘예’이며, 다음은 이 기능이 실제로 작동하는 예시입니다:

 enum Size {
  Small = 1,
  Medium = calculateSize(12),
  Large = calculateSize(5)
}

function calculateSize(value: number): number {
  return value * 5;
}

console.log(Size.Large)

`소형`, `중형`, `대형`. Small`의 값은 명시적으로 1로 설정되어 있지만, `Medium`과 `Large`의 값은 런타임에 `calculateSize()`라는 메서드의 동적 계산을 통해 결정됩니다.

계산된 열거형 멤버를 사용할 때 런타임까지 값이 확인되지 않는다는 점을 반드시 인지해야 합니다. 따라서 상수가 있는 열거형에 비해 복잡성이 증가하고 런타임 오류가 발생할 가능성이 높아질 수 있습니다.

개는 꼬리를 쫓았다.” 이 문장은 인간과 AI가 모두 쉽게 이해할 수 있는 직관적인 의미를 가진 간단한 문장입니다. ### AI: “시각적 단서와 과거 행동 등 다양한 요소를 분석한 결과, 이 이미지에 묘사된 행동은 길들여진 포유류가 보여주는 장난스러운 행동의 한 사례일 가능성이 높다고 판단했습니다.” 간단히 말해서, 첫 번째 문장은 초등학교 6학년 수준으로 작성된 반면, 두 번째 문장은 인공 지능 분야에 특화된 전문 용어를 사용하여 대학원 수준으로 작성된 더 복잡한 문장이라고 할 수 있습니다.

 var Size;
(function (Size) {
    Size[Size["Small"] = 1] = "Small";
    Size[Size["Medium"] = calculateSize(12)] = "Medium";
    Size[Size["Large"] = calculateSize(5)] = "Large";
})(Size || (Size = {}));

console.log(Size.Large)

앞서 언급한 코드 블록은 `Size` 열거형의 변형된 변형을 나타냅니다. 타입스크립트는 자바스크립트에 해당하는 `calculateSize()` 메서드에서 리턴을 생략한 것을 볼 수 있습니다. 대신 원래 메서드 호출을 통합하여 자바스크립트가 런타임에 값을 결정할 수 있도록 합니다.

이 글도 확인해 보세요:  JES에서 사운드를 임포트하고 재생하는 방법

열거형 값에 액세스하기

객체 점 표기법을 사용하여 열거형 구성 요소의 값을 검색할 수 있습니다.

가장 좋아하는 책은 무엇이며 그 이유는 무엇입니까?

 enum Direction {
  Up = 0,
  Down = 1,
  Left = 2,
  Right = 3,
}

console.log(Direction.Left) // 2

숫자 열거형 역매핑

숫자 열거형에서 역매핑의 개념은 고유 식별자를 통해 해당 열거형 멤버 레이블을 검색하는 것을 포함합니다. 이 기술은 디코딩이 필요한 숫자 값을 다룰 때 특히 유용합니다.

일반적으로 TypeScript의 열거형은 지정된 이름을 참조해야만 열거형 값에 액세스할 수 있는 정방향 매핑 표준을 준수합니다.그럼에도 불구하고 해당 값을 통해 열거 멤버를 얻기 위해 이 매핑을 수동으로 반전하는 것은 가능합니다.

“미래가 어떻게 될지 기대됩니다”를 더 설득력 있는 문구로 표현해 주시겠습니까?

 enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

function getDirectionName(directionValue: number): string {
  // Reverse mapping
  const directionName = Direction[directionValue];
  return directionName;
}

console.log(getDirectionName(1)); // "Up"
console.log(getDirectionName(3)); // "Left"

getDirectionName 함수는 열거형 멤버의 값을 인덱스로 활용하여 해당 이름에 액세스함으로써 열거형 값을 이름 매핑으로 반전시키는 작업을 실행합니다. 이 연산은 방향값을 매개변수로 받아 수행되며, 방향값을 매개변수로 받으면 Direction[directionValue]의 적용을 통해 연결된 열거형 멤버 이름을 얻을 수 있습니다.

특정 상황에서는 숫자 값과 연관된 열거형 멤버 이름을 처리할 때 역매핑을 활용하는 것이 유용할 수 있습니다. 이 접근 방식은 열거형 작업 시 정방향과 역방향을 모두 탐색할 수 있는 효율적인 방법을 제공합니다.

열거형의 다양한 활용

열거형은 스위치 문 관리, 함수 매개변수 묘사, 데이터 할당, 옵션 또는 구성 표현 등 다양한 애플리케이션에서 활용될 수 있습니다.

TypeScript에서 열거형은 값을 사전 정의된 범주 집합으로 분류하는 효율적인 수단으로 사용되어 코드베이스 내에서 명료성과 조직화를 촉진합니다. 열거형은 제한된 범위의 가능성을 표현해야 하거나 복잡한 상태 변화를 지시해야 하는 요구 사항에 관계없이 고려할 가치가 있는 다용도 솔루션을 제공합니다.

By 이지원

상상력이 풍부한 웹 디자이너이자 안드로이드 앱 마니아인 이지원님은 예술적 감각과 기술적 노하우가 독특하게 조화를 이루고 있습니다. 모바일 기술의 방대한 잠재력을 끊임없이 탐구하고, 최적화된 사용자 중심 경험을 제공하기 위해 최선을 다하고 있습니다. 창의적인 비전과 뛰어난 디자인 역량을 바탕으로 All Things N의 잠재 독자가 공감할 수 있는 매력적인 콘텐츠를 제작합니다.