TS | enum과 literal

| enum과 literal

enum

// 성별, 부서코드, 카테고리, ...

const category = "";

//웹 앱
// ---기준선
// 서버

function cate(category: any){
    if (category==="가전제품"){
        console.log("5% discount");
    }else if(category==="주방제품"){
        console.log("10% discount");
    }else {
        console.log("서버 멈춤");
    }
}

cate(category);

카테고리에 가전제품 또는 주방제품 만 들어가야하는데

저런식으로 의도하지않은 값이 들어갈경우 서버가 멈추게 될 수 있다.

 

그래서 값을 정해주는 것이 바로 enum 이다

아래처럼 적어야주면된다

// 성별, 부서코드, 카테고리, ...

enum categoryEnum{
    H,
    K,
    S,
}

const category: categoryEnum = categoryEnum.H;

//웹 앱
// ---기준선
// 서버

function cate(category: any){
    if (category==="H"){
        console.log("5% discount");
    }else if(category==="K"){
        console.log("10% discount");
    }else if(category==="S"){
        console.log("80% discount");
    }else {
        console.log("서버 멈춤");
    }
}

cate(category);

그런데 결과 값은 또 서버 멈춤이 뜬다

왜 그럴까?

console.log로 찍어보자

// 성별, 부서코드, 카테고리, ...

enum categoryEnum{
    H,
    K,
    S,
}

const category: categoryEnum = categoryEnum.H;

//웹 앱
// ---기준선
// 서버

function cate(category: any){
    console.log(category)
    if (category==="H"){
        console.log("5% discount");
    }else if(category==="K"){
        console.log("10% discount");
    }else if(category==="S"){
        console.log("80% discount");
    }else {
        console.log("서버 멈춤");
    }
}

cate(category);

값이 0 이 나오는것을 알 수 있다

 

K를 넣으면

const category: categoryEnum = categoryEnum.K;

1이 나오고

 

S를 넣으니 

const category: categoryEnum = categoryEnum.K;

2가 나온다

enum categoryEnum{
    H,  -> 0
    K,  -> 1
    S,  -> 2
           .
           .
           .
}

이유는 이 H K S 부분에 값을 대입시켜줘야한다 그러지않으면

위에서부터 순서대로 0 1 2 3 4.... 숫자가 대입된다

따라서 아래와 같이 써줘야함

enum categoryEnum{
    H="H",
    K="K",
    S="S",
}

<전체코드>

enum categoryEnum{
    H="H",
    K="K",
    S="S",
}
const category: categoryEnum = categoryEnum.S;
//웹 앱
// ---기준선
// 서버
function cate(category: any){
    console.log(category)
    if (category==="H"){
        console.log("5% discount");
    }else if(category==="K"){
        console.log("10% discount");
    }else if(category==="S"){
        console.log("80% discount");
    }else {
        console.log("서버 멈춤");
    }
}

cate(category);

참고로 

컴파일 된 js 파일을 보면 enum은 함수 형태로 변환되어있다. js에서는 enum 이 실제로 없기 때문에 tsc는 enum을 function으로 구현해놓는다

 

 

literal

리터럴은 일회용으로 사용할 시 아래처럼 사용하면된다 

const sex: "MALE" | "FEMALE" | "ETC" = "MALE";

반드시 정해진 값 중에서 하나의 값을 사용해야한다