[Typescript] 이넘 타입(enum)

이넘 타입

이넘은 특정 값들의 집합을 의미하는 자료형이다.

숫자형 이넘과 문자형 이넘이 있다.

 

1. 숫자형 이넘

enum을 만들고 값을 초기화하지 않으면 자동적으로 0으로 시작하는 이넘 타입이 만들어진다.

// 숫자형 이넘
enum Shoes {
    Nike = 10,
    Adidas,
    Sth,
};
// 첫 번째 값을 초기화하면 그 다음 요소부터는 1씩 증가한다.
 
// 정해진 숫자로 취급한다.
console.log(10 === Shoes.Nike); // true
console.log(typeof Shoes.Nike); // 10이므로 number라고 나온다.

 

 

2. 문자형 이넘

문자형 이넘은 문자를 모든 요소에 지정해주어야 한다.

// 문자형 이넘
enum Shoes2 {
    Nike = '나이키',
    Adidas = '아디다스',
}
 
var myShoes = Shoes2.Nike;
console.log(typeof myShoes); // '나이키'

 

 

3. 이넘의 활용

이넘은 입력값을 제한하고 싶을 때 사용한다.

function askQuestion(answer: string) {
    if (answer === "yes") {
        console.log('정답입니다');
    }
    if (answer === 'no') {
        console.log('오답입니다')
    }
}
// 다양한 형태의 문자열 입력 가능
askQuestion('예스');
askQuestion('y')
askQuestion('yes')

이넘을 사용하지 않은 askQuestion의 경우, 입력값의 타입이 string이므로 우리가 원하는 내용이 아닌 다른 문자열도 입력받을 수 있다. 정답이라는 의미로 'yes'대신 '예스'를 입력할 수 있지만 askQuestion안에서는 이것이 'yes'를 의미하는지 알 수 없으므로 원하는대로 작동하지 않는다.

 

// 이넘을 사용해 입력값을 구체적인 값으로 제한
enum Answer {
    Yes = 'yes',
    No = 'no'
}
 
function askQuestion2(answer: Answer) {
    if (answer === 'yes') {
        console.log('정답입니다');
    }
    if (answer === 'no') {
        console.log('오답입니다')
    }
}
// 이넘에서 제공하는 데이터만 입력받게 된다.
askQuestion2(Answer.Yes);
askQuestion2('yes'); // error

 

이넘으로 입력받는 askQuestion2의 경우 Answer.Yes 혹은 Answer.No만 입력할 수 있다. 입력받을 때 이것이 askQuestion2 내에서 처리할 수 있도록 제한한다.

 

3. 이넘의 활용(2)

PhoneType 이넘을 사용해 입력값을 제한한다.

enum PhoneType {
  Home = 'home',
  Office = 'office',
  Studio = 'studio',
}
  
 
// phoneType : home, office, studio 으로 제한
function findContactByPhone(phoneNumber: number, phoneType: PhoneType): Contact[] {
return contacts.filter(
   contact => contact.phones[phoneType].num === phoneNumber
 );}
 
findContactByPhone(123456789, PhoneType.Home)

findContactByPhone을 이용해 전화번호와 PhoneType 둘 다 일치하는 정보를 가진 목록을 출력할 수 있다.

이 때 'home'이나 'office'를 직접 작성하지 않고 PhoneType을 사용해 입력값을 제한하면 오류를 줄일 수 있다.

 

 

강의

https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8/dashboard

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의