[Typescript Study] 타입가드 및 열거형

타입가드

typescript는 input과 output의 type을 계속해서 좁혀주어야한다. 그러한 부분에 있어서, 타입가드를 통해 input타입에 따른 output타입을 통제해주거나, 줄여 줄 수 있다.

• 예를들어

function print(value: number | string): string {
    if (typeof value === "number") {
        return String(value)
    }

    if (typeof value === "string") {
        return value
    }

    return value
}

위와 같이 type에 따른 값들을 변경 시켜 줄 수가 있다. 이 때 사용할 수 있는 3가지가 있다.

• typeof (위의 예제와 동일)

• in : 객체에 특정 속성이 존재하는 지를 검사

interface Dog {
    name: string
    bark(): "멍멍"
}

interface Cat {
    name: string
    meow(): "냐옹"
}

function sayAnimal(animal: Dog | Cat) {
    if ("bark" in animal) {
        animal.bark()
    }
    if ("meow" in animal) {
        animal.meow();
    }
}

• instanceof:생성자의 prototype 속성이 객체의 prototype 체인 어딘가에 존재하는지를 판별

function getDate(date: Date | string): Date {
    if (date instanceof Date) {
        return date
    }
    
    return new Date(date);
}

Enum

열거형 Enum을 사용하지 않고, as const를 사용하는 것이 더 좋다고 한다.네 Enum! 누가 Typescript에서 Enum을 쓰느냐!
하지만 typescript에서 사용하는 문법이고, 그래도 이전 레거시 코드들에서 혹은 위 글에서 보이는 tree shaking을 지원하지 않는 번들러에서는 사용이 되니 한번 알아보자.

• 의미있는 상수 자료를 정의할 수 있다
• 키를 값에 할당하며 순서가 없는 집합이자 자료구조이다.
• enum 키워드 PascalCase 조합으로 생성
• 계산된 값을 사용할 수 있다.
• 숫자형 열거
  - 리버스 매핑이 자동으로 되며
  • 값이 자동으로 증가한다.
• 문자형 열거
  - 각 멤버의 값을 문자열로 초기화 되어야한다.
  • 숫자형 열거에서 지원되는 값증가, 리버스 매핑 되지 않는다.
• 혼합형 열거
  - 숫자형과 문자형을 동시에 사용하면, 각자 특성에 맞게 열거 된다.
  
• const 열거
  - 기본적으로 열거형은 불안전한 접근을 허용
  • enum앞에 키워드를 명시
  • 컴파일 후 제거되기 때문에 javascript를 생성하지 않는다.

const enum Language {
    TypeScript = "TS",
    JavaScript = "JS",
    Java = "JAVA",
    Ruby = "RB",
}

type LangCode = keyof typeof Language

type LangCode2 = "TypeScript" | "JavaScript" | "Java" | "Ruby"

type Lang = "TS" | "JS"

function getLang(langCode: LangCode) {
    console.log(langCode)
}

위와 같이 keyof typeof Langauge 를 조합하여 자주 사용이 된다.