TypeScript | 이넘(Enums)

Kate Jung·2022년 1월 12일
0

TypeScript

목록 보기
5/10
post-thumbnail

📌 이넘(Enums)

특정 값들의 집합을 의미하는 자료형

  • 예시
    // 이와 같은 목록이 이넘이 될 수 있음
    나이키
    아디다스
    뉴발란스
  • TS에서 지원하는 것

    • 문자형 이넘
    • 숫자형 이넘

📌 숫자형 이넘

🔹 선언

// 초기 값을 준 경우
enum Direction {
    Up = 1, // 1
    Down, // 2
    Left, // 3
    Right // 4
}

// 초기 값을 주지 않은 경우
enum Direction {
  Up, // 0
  Down, // 1
  Left, // 2
  Right // 3
}
  • 선언 시, 초기 값을 주면 초기 값부터 1씩 증가

    초기 값을 주지 않으면 → 0부터 1씩 증가

🔹 사용하기

예시

    enum Answer {
      No = 0,
      Yes = 1,
    }
    
    function respond(recipient: string, message: Answer): void {
      // ...
    }
    
    respond("Captain Pangyo", Answer.Yes);

주의

선언할 때, 만약 이넘 값에 다른 이넘 타입의 값을 사용하면

→ 선언하는 이넘의 첫 번째 값에 초기화를 해줘야 한다

    enum Wrong {
      A = getSomeValue(),
      B, // Error, 초기화가 필요합니다.
    }

WARNING

바로 앞 문맥을 검증하기 위한 몇 가지 코드 짜서 문장 고칠 것..!

📌 문자형 이넘

숫자형 이넘과 비교

  • 비슷한 부분

    개념적으로는 거의 비슷

  • 차이

    • 런타임에서의 미세한 차이 있음

    • auto-incrementing(자동 증가) 없음.

      문자형 이넘숫자형 이넘
      디버깅 할 때가끔 불명확항상 명확 → 읽기 편함
    • 모든 이넘 값: 특정 문자 or 다른 이넘 값으로 초기화 해줘야 함.

        enum Direction {
            Up = "UP",
            Down = "DOWN",
            Left = "LEFT",
            Right = "RIGHT",
        }

📌 복합 이넘 (Heterogeneous Enums)

  • 기술적으로 문자 & 숫자 혼합 생성 가능.
  • 비추 (최대한 같은 타입으로 이루어진 이넘 사용 권고)
enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

📌 런타임 시점에서의 이넘 특징

런타임시에 실제 객체 형태로 존재

  • 예시
    // 아래와 같은 이넘 코드가 있을 때
    
    enum E {
      X, Y, Z
    }
    
    function getX(obj: { X: number }) {
      return obj.X;
    }
    getX(E); // 이넘 E의 X는 숫자이기 때문에 정상 동작

📌 컴파일 시점에서의 이넘 특징

keyof 대신 keyof typeof 권고

  • 이넘: 런타임 시점에서는 실제 객체.

    but, keyof 사용 시, 주의 해야 함.

    → 일반적으로 keyof를 사용해야 되는 상황에서 대신 keyof typeof를 사용 추천

  • 예시

    enum LogLevel {
      ERROR, WARN, INFO, DEBUG
    }
    
    // 'ERROR' | 'WARN' | 'INFO' | 'DEBUG';
    type LogLevelStrings = keyof typeof LogLevel;
    
    function printImportant(key: LogLevelStrings, message: string) {
        const num = LogLevel[key];
        if (num <= LogLevel.WARN) {
           console.log('Log level key is: ', key);
           console.log('Log level value is: ', num);
           console.log('Log level message is: ', message);
        }
    }
    printImportant('ERROR', 'This is a message');

📌 리버스 매핑(Reverse Mapping)

에넘의 키(key)로 값(value)을, 값(value)으로 키(key)를 얻기 가능

  • 숫자형 이넘에만 존재하는 특징

    문자형 이넘 → 無

enum Enum {
  A
}
let a = Enum.A; // 키로 값을 획득 하기
let keyName = Enum[a]; // 값으로 키를 획득 하기

참고

  • 캡틴판교_타입스크립트 핸드북
profile
복습 목적 블로그 입니다.

0개의 댓글