[TypeScript] 이넘과 타입 단언

enum 이넘

enum

• 열거형 타입: 관련된 타입을 묶어 놓는 것
• enum 이라는 키워드 사용 → 사용할 값들을 특정 타입으로 묶어둠
• 케이스별 오타를 방지해줌.
• 타입 별칭, 인터페이스의 재료로도 활용 가능.

• 다음과 같이 사용 가능

    {
      // enum
      enum StatusEnum {
        Loading = "loading",
        Success = "success",
        Error = "error",
      }
      type Status = string;
      function showStatus(status: StatusEnum) {
        switch (status) {
          case StatusEnum.Loading:
            console.log("로딩 중...");
            break;
          case StatusEnum.Success:
            console.log("성공");
            break;
          case StatusEnum.Error:
            console.log("실패!");
            break;
        }
        // if (status === "loading") console.log("로딩 중...");
        // else if (status === "success") console.log("성공");
        // else if (status === "error") console.log("실패!");
      }
      showStatus(StatusEnum.Success);
    }
  

• enum의 키는 파스칼 케이스(첫글자 대문자)로 작성

enum vs const enum

enum

• 번들 크기가 크지만, 디버깅이 용이

const enum

• 번들 크기가 작지만, 디버깅이 불편함 → 컴파일 흔적이 남지 않음!

      const enum Status {
        Loading = "loading",
        Success = "success",
        Error = "error",
      }
      
      console.log(Status.Loading);
  

숫자 열거형

• enum은 별도의 값을 지정하지 않으면, 숫자 값이 차례로 1씩 증가하여 할당.

• 다음과 같이 사용 가능하다

    enum Direction {
      Up,   // 0
      Down, // 1
      Left, // 2
      Right,// 3
    }
    console.log("Up");
    console.log(Direction.Up); // 0이 나옴
  

• 만약, 중간에 숫자 값을 할당시 → 그 다음 값이 차례로 1씩 증가하여 할당.

    enum Direction {
      Up,
      Down = 500,
      Left,
      Right,
    }
    console.log(Direction.Up);    // 0
    console.log(Direction.Down);  // 500
    console.log(Direction.Left);  // 501
    console.log(Direction.Right); // 502
  

문자 열거형

• enum으로 문자열 값을 나열하여 할당

혼합 열거형

• enum으로 문자열, 정수 값.. 등을 나열하여 할당

리버스 매핑

• enum은 반대로 값을 인덱스로 키를 가져올 수 있다.

      enum StatusCode {
        OK = 200,
        BadRequest = 400,
        Unauthorized = 401,
        NotFound = 404,
      }
      console.log(StatusCode.OK);
      console.log(StatusCode[200]); // 리버스 매핑
  

• const enum은 컴파일 흔적이 없어, 키를 가져올 수 없다.

---

타입 단언

타입 가드

• 타입을 좁혀주는 조건문 or 문법을 의미.

타입 단언

• 타입스크립트 컴파일러에게 타입을 명확하게 알려주는 행위

• 타입 단언 연산자 as
  주로 사용하는 방식.

    as [단언할 타입]
  

• 타입 단언 연산자 <>
  해당 방식은 리액트에서 사용할 수 없음. (JSX 문법과 충돌)

    <단언할 타입>
  

• 사용 예시

    function printValue(value: number | string) {
      // 타입을 좁혀주는 조건문 또는 문법 -> 타입가드
      if (typeof value === "number") console.log(value.toFixed(0));
      
      // 타입 단언: tsc에게 타입을 명확하게 알려주는 행위
      // 타입 단언 1: as [단언할 타입]
      console.log((value as number).toFixed(0));
      // 타입 단언 2: <단언할 타입>, 리액트에서 사용할 수 없음 (JSX 문법 충돌)
      console.log((<number>value).toFixed(0));
    }
    printValue(3.14);
  

• 개발자가 타입을 확실히 단언할 수 있는 상황에서 사용하기 용이.

---

널 관련 연산자

널 아님 보장 연산자 !

• 널이 아닌 타입으로 단언하는 연산자

• 다음과 같은 예제에서는 해당 타입에 null 이 들어올 수 있음.

    function printValue(value: number | null) {
      console.log(value.toFixed(2));
    }
  

  

• 해당 문제의 해결책으로, 앞서 타입 가드 or 옵셔널 프로퍼티 방식이 존재.

• 다음과 같이, 널이 아님을 보장하는 연산자 ! 을 사용해도 해결할 수 있음.

    function printValue(value: number | null) {
      console.log(value!.toFixed(2));
    }
  

• 만약, 널 아님 보장 연산자 !에 null 이 들어오면?