[TypeScript] Enum(열거형)

 

 ◼ Enum? 

 

TS에 Enum은 복잡한 구조를 단순화하고, 가독성을 향상 시키기 위해서 만들어진 객체 타입입니다.

 

Enum은 한국말로 [열거형]이라고 합니다.

열거형이라는 단어의 의미는 네이버 사전, 위키백과에서는 이렇게 설명하고 있습니다.

 

 

짧게 요약하면,

관련있는 상수 값들을 나열, 집합해 놓은거라 생각하면 될꺼 같습니다.

 

그리고 TS에만 있는 개념이라 JS로 컴파일을 하면 다른 형태로 변환됩니다.

// TS
enum Direction {
    Up,
    Down,
    Left,
    Right
}

// JS로 컴파일 
var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));

 

 

[주의]

읽기 전용이라, 할당이 안됩니다.
소문자, 대문자를 구별해 주셔야 합니다.

 

 

 

---

 

 

 ◼ 언제 사용하나? 

상수값이 여러개 존재 할시 그룹화 하듯 사용하는게 좋습니다.

enum LanguageCode {
  korean = 'ko',
  english = 'en',
  japanese = 'ja',
}
enum Size {
  S,
  M,
  L,
}

 

 

 

---

 

 ◼ TS Enum 맴버 란 

"멤버"는 열거형(Enum)에서 각각의 상수를 지칭하는 것입니다

// 열거형 Enum 정의
enum Size {
  S = 100,  // S 멤버의 초기값은 100입니다.
  M = 120,  // M 멤버의 초기값은 120입니다.
  L = 150   // L 멤버의 초기값은 150입니다.
}

 

 

 

---

 

 

 

 ◼ TS Enum 사용방법 

TS에서 Enum 타입으로 선언

enum Size {
  S,
  M,
  L
}

let product: {
    id:number,
    name:string,
    size: Size[] // enum Size 배열 형태로 타입 선언
 } = {
    id: 1,
    name: '티셔츠',
    size: [Size.S, Size.L] // 점표기법으로 작성합니다(대,소문자 정확히)
 }

 

 

enum Size 출력 값

 

product 출력 값

 

 

 

---

 

 

 

Enum의 초기값이 없을때 초기값 0부터

Enum의 값을 지정을 하지 않으면 0부터 차례대로 숫자형 초기값을 가지게 됩니다.

하지만 첫번째 상수값에 1 로 초기화된 숫자 열거형을 선언했습니다.

그 지점부터 뒤따르는 멤버들은 자동으로-증가된 값을 갖습니다. 
즉 Direction.Up 은 10, Down 은 11, Left 는 12, Right 은 13 을 값으로 가집니다.

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

 

 

 

 

---

 

 

Enum의 프로퍼티에 초기값 넣기

열거형의 이름을 사용해 타입을 선언(Size) , 열거형 자체에서 프로퍼티(S, M, L)로 모든 멤버에 접근하여 사용합니다.

enum Size {
  S = 100,
  M = 120,
  L = 150
}

console.log(Size.S)
console.log(Size.M)
console.log(Size.L)

 

 

 

---

 

 

 

Enum의 값을 불러오는 방법

Enum의 값을 불러오는 방법은 2가지가 있습니다.

• 프로퍼티로 불러오는 방법
• 대괄호표기법으로 불러오는 방법

대괄표 표기법으로 불러어는 것은

코드에서 처럼 초기값을 대괄호에 적으면

초기값에 해당하는 Enum 멤버를 참조하며, 해당 맴버를 찾아서 반환합니다. 

 

enum Size {
  S = 100,  // S 멤버의 초기값은 100
  M = 120,  // M 멤버의 초기값은 120
  L = 150   // L 멤버의 초기값은 150
}

console.log(Size.S);       // 출력: 100, S 멤버의 초기값을 출력
console.log(Size.M);       // 출력: 120, M 멤버의 초기값을 출력
console.log(Size.L);       // 출력: 150, L 멤버의 초기값을 출력
console.log(Size[100]);    // 출력: "S", 초기값이 100인 멤버를 열거형 이름으로 참조
console.log(Size[120]);    // 출력: "M", 초기값이 120인 멤버를 열거형 이름으로 참조
console.log(Size[150]);    // 출력: "L", 초기값이 150인 멤버를 열거형 이름으로 참조

 

 

 

---

 

 

 

 

Enum의 프로퍼티 없이 string 형태로 넣으면??

Enum은 string 형태의 프로퍼티를 가집니다. 그래서 숫자로는 선언할수 없습니다.

 

 

 

 

문자열로 넣으면 0부터 초기값을 가지게 되며,

대괄호법을 통해 초기값에 해당하는 맴버를 출력합니다.

// 열거형 Enum 정의
enum Fruits {
  'apple',   // 0번 인덱스에 해당하는 멤버: "apple"
  'banana',  // 1번 인덱스에 해당하는 멤버: "banana"
  'orange'   // 2번 인덱스에 해당하는 멤버: "orange"
}

// 각 멤버 참조 및 출력
console.log(Fruits.apple);   // 출력: 0(number), 열거형 멤버를 문자열로 참조
console.log(Fruits.banana);  // 출력: 1(number), 열거형 멤버를 문자열로 참조
console.log(Fruits.orange);  // 출력: 2(number), 열거형 멤버를 문자열로 참조
console.log(Fruits[0]);      // 출력: apple(string), 열거형 멤버의 인덱스를 사용하여 해당하는 멤버의 이름을 가져옵니다.
console.log(Fruits[1]);      // 출력: banana(string), 열거형 멤버의 인덱스를 사용하여 해당하는 멤버의 이름을 가져옵니다.
console.log(Fruits[2]);      // 출력: orange(string), 열거형 멤버의 인덱스를 사용하여 해당하는 멤버의 이름을 가져옵니다.

 

 

 

 

 

숫자열 Enum 의 주의점

인덱스는 0부터 시작을 합니다.
예를 들어서 조건문에서 사용할시 문제가 생길수 있습니다. 

 

0은 false 이기 때문에 조건문같이 비교할때 조심해야 합니다.

enum Size {
	S, // 0
	M, // 1
	L  // 2
}

if(Size.S) {
console.log('true' 영역);
} else {
console.log('false' 영역);
}

 

 

 

 

---

 

 

 

 ◼ TS Enum 종류 

종류가 너무 많다. 정리하기 보다는 있는 그대로 확인해 보는게 좋을꺼 같아서 링크를 달아 두었습니다.

 

https://www.typescriptlang.org/ko/docs/handbook/enums.html#%EC%88%AB%EC%9E%90-%EC%97%B4%EA%B1%B0%ED%98%95-numeric-enums

 

 

 

 

---

 

 

 

 

 ◼ 참고하면 좋은 사이트 

Enum에 대해 찾다가, 'Enum을 사용하지 않는게 좋은 방법??' 이런식의 제목에 끌려 읽다가

아주 좋은 사이트라 저장해 놓았습니다.

 

1.
https://velog.io/@vraimentres/typescript-enum
2.

https://velog.io/@sensecodevalue/Typescript-Enum-%EC%99%9C-%EC%93%B0%EC%A7%80-%EB%A7%90%EC%95%84%EC%95%BC%ED%95%98%EC%A3%A0

 

 

 

 

 

 

 

 

 

 

 

[참고]
https://www.typescriptlang.org/ko/docs/handbook/enums.html
https://medium.com/@seungha_kim_IT/typescript-enum%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3b3ccd8e5552

https://eatnows.tistory.com/91

https://heepie.me/32