sooleeandtomas

TS - enum 본문

코딩 공부 노트/TS

TS - enum

sooleeandtomas 2020. 7. 31. 16:30

1. enum은 선택할 수 있는 제한된 옵션들을 설정해놓는 object이다. 예) 동,서,남,북  | 등급 A,B,C,D

2. enum은 그 옵션들을 편리하게 사용하게 해주는 프로그래밍 기능이다.

 

예시 1) 등급 매길 때 사용

enum StarbucksGrage{
   WELCOME,
   GREEN,
   GOLD
}

function getGragde(v:StarbucksGrade):number{
	switch(v){
      case StarbucksGrade==="WELCOME":
        return 0
     case StarbucksGrade==="GREEN":
        return 5 
     case StarbucksGrade==="GOLD":
        return 10        
    }
}

console.log(getGrade(Starbucks.Green)) //5
console.log(Starbucks.Green) //1

 

ts ⇢ js

var StarBucksGrade;

(function(StarBucksGrade) {
    StarBucksGrade[StarBucksGrade["WELCOME"] = 0] = "WELCOME";
    StarBucksGrade[StarBucksGrade["GREEN"] = 1] = "GREEN";
    StarBucksGrade[StarBucksGrade["GOLD"] = 2] = "GOLD";
})(StarBucksGrade || (StarBucksGrade = {}));

function getDiscount(v) {
    switch (v) {
        case StarBucksGrade.WELCOME:
            return 0;
        case StarBucksGrade.GREEN:
            return 5;
        case StarBucksGrade.GOLD:
            return 10;
    }
}

console.log(getDiscount(StarBucksGrade.GREEN));
console.log(StarBucksGrade.GREEN);

 

enum{

//  여기서 모든 값들은 자동적으로 순서가 매겨진다.

}

그래서 console.log(StarbucksGrage) 의 결과는 아래와 같다.

{
  '0': 'WELCOME',
  '1': 'GREEN',
  '2': 'GOLD',
  WELCOME: 0,
  GREEN: 1,
  GOLD: 2
}

 

⚠️ 주의     enum에 새로운 옵션이 추가 되면, enum 안의 순서에 따라 객체에 할당된 순서도 변한다.

{
  '0': 'WELCOME',
  '1': 'BLUE',
  '2': 'GREEN',
  '3': 'GOLD',
  WELCOME: 0,
  BLUE: 1,
  GREEN: 2,
  GOLD: 3
}

🙆‍♀️ 그렇기 때문에, 초기에 값을 선언해 주는 것이 좋은 방법이다.

{
  WELCOME = 0,
  GREEN = 1,
  GOLD = 2
}

OR

{
  WELCOME = "WELCOME",
  GREEN = "GREEN",
  GOLD = "GOLD"
}

console.log(StarBucksGrade[1]) // GREEN
console.log(getDiscount(StarBucksGrade['GREEN'])) // 5

 

 

 

 

+ "타입스크립트에서 enum을 사용하는 이유" 아티클을 읽어보세요

 

TypeScript enum을 사용하는 이유

(본 글은 TypeScript 입문자 중 enum 기능이 있는 다른 언어를 사용해 본 경험이 없는 분들을 위해 쓰여졌습니다. 예제 코드를 TypeScript playground에 붙여 넣고, 마우스 포인터를 변수 위에 둬서 변수의 �

medium.com

 

'코딩 공부 노트 > TS' 카테고리의 다른 글

TS - annotation  (0) 2020.07.31
TS - interface  (0) 2020.07.31
TS - 사용법 익히기  (0) 2020.07.31
npm install brew install  (0) 2020.07.30
Comments