TypeScript: 열거형

이것은 여기 DEV에 대한 Learn Typescript 시리즈의 3부입니다. 이 게시물에서는 Typescript의 Enum에 대해 이야기할 것입니다. 들어본 적이 있습니까? 중요하지 않습니다.

열거형은 관련 값의 컬렉션을 구성하거나 변수에 대해 허용되는 여러 값을 제안하는 구조를 구성하는 방법입니다. C, C# 및 Java와 같은 많은 프로그래밍 언어에는 열거형 데이터 유형이 있지만 열거형은 자바스크립트 데이터 유형이 아닙니다. 이것은 typescript와 함께 제공되는 수많은 기능 중 하나입니다. TypeScript에는 문자열 열거형과 숫자(숫자형) 열거형이 있습니다. 다음은 typescript의 열거형 정의 예입니다.

enum CardSuit {
    Clubs,
    Diamonds,
    Hearts,
    Spades
}

// Sample usage
var card = CardSuit.Clubs;

// Safety
card = "not a member of card suit"; // Error : string is not assignable to type `CardSuit`

TypeScript 열거형은 숫자 기반입니다. 기본적으로 열거형의 번호는 0에서 시작하지만 첫 번째 또는 다른 멤버에 대해 수동으로 다른 값을 설정할 수도 있습니다.

enum Color {
    Red,
    Green,
    Blue
}
var col = Color.Red;
col = 0; // Effectively same as Color.Red

열거형 값 액세스

숫자 열거형을 사용하면 정수에서 열거형 이름에 액세스할 수 있습니다. 그러나 스팅 열거형의 값에는 이 기능이 없습니다. 즉, 열거형 이름 뒤에 상수 이름을 사용하여 값을 얻을 수 있습니다. 또한 숫자 열거형을 사용하면 값을 사용하여 이름을 반환할 수도 있습니다.

예를 들어 Orientation with East, West, North, South라는 열거형은 Orientation.East를 사용하여 값 0을 가져오거나 Orientation[0]을 사용하여 동쪽을 얻을 수 있습니다. 이것은 TypeScript가 항목 이름이나 값을 사용하여 액세스할 수 있는 맵 개체를 생성하기 때문에 작동합니다.

다음은 오리엔테이션 열거형의 코드입니다.

enum Orientation {
    East,
    West,
    North,
    South,
}
let directionInNumber = Orientation.East; // Access with the Enum
let directionInString = Orientation[0];  // Access the Enum string from number
console.log(directionInNumber);
console.log(directionInString);

값에 대한 문자열이 있는 열거형(문자열 열거형)에서는 불가능합니다. 다음 코드는 8행과 9행이 열거형에 잘못 액세스했기 때문에 컴파일되지 않습니다.

enum OrientationString {
    East = "E",
    West = "W",
    North = "N",
    South = "S",
}
let directionInNumber = OrientationString.East; // Access with the Enum
let directionInString = OrientationString[0];  // Access the Enum string from number
let directionInString2 = OrientationString["E"];  // Access the Enum string from number
console.log(directionInNumber);
console.log(directionInString);
console.log(directionInString2);

숫자 열거형에 대한 JavaScript 출력은 다음과 같습니다(첫 번째 예).

let Orientation;
(function (Orientation) {
    Orientation[Orientation["East"] = 0] = "East";
    Orientation[Orientation["West"] = 1] = "West";
    Orientation[Orientation["North"] = 2] = "North";
    Orientation[Orientation["South"] = 3] = "South";
})(Orientation || (Orientation = {}));
let directionInNumber = Orientation.East;
let directionInString = Orientation[0];
console.table(Orientation);

TypeScript에 의해 생성된 JavaScript 코드는 변수( Orientation )에 가능한 네 가지 값을 숫자와 문자열로 할당하는 클로저를 만듭니다. Orientation 변수는 8개의 요소가 있는 배열입니다. 10행의 코드는 어느 쪽이든 값에 액세스할 수 있는 방법을 보여주는 출력을 추가했습니다.

열거형 속도 향상

열거형은 성능 속도를 높이기 위해 상수로 설정할 수 있습니다. 이렇게 하면 실행 중에 TypeScript에서 생성한 함수를 JavaScript로 참조하는 대신 값을 사용하게 됩니다.

예를 들어, 상수 열거형이 없으면 Orientation.East 방향으로 설정된 값은 값을 얻기 위해 맵에서 값을 찾는 함수와 같습니다. 그러나 상수를 사용하면 값이 변환된 코드에서 직접 0로 설정됩니다. 더 이상 기능이나 매핑이 필요하지 않습니다.

이것으로 enum에 관한 이 포스트를 마치겠습니다. 읽어주셔서 감사합니다. 이 Typescript 시리즈의 다음 게시물을 확인하십시오. 그때까지 차오!