[Typescript] 타입 좁히기

타입 좁히기

다음과 같이 value가 number 타입이거나 string 타입일 것으로 기대하고
메서드를 사용하려고 하면 오류가 발생

function func(value: number | string) {
  value.toFixed() // 오류
  value.toUpperCase() // 오류
}

typeof 타입 가드

Number 메서드인 toFixed 메서드나 String 메서드인 toUpperCase를 사용하고 싶다면
조건문을 이용해 value의 타입이 number 타입임을 보장해야한다.

이렇게 타입 보장하는 것을 타입 좁히기 라고 한다.

function func(value: number | string) {
  if (typeof value === "number") {
    console.log(value.toFixed());
  } else if (typeof value === "string") {
    console.log(value.toUpperCase());
  }
}

instanceof 타입 가드

instanceof 를 이용하면 내장 클래스 타입을 보장할 수 있다.

instanceof 뒤에는 타입 별칭을 작성할 수 없다.

function func(value: number | string | Date | null) {
  if (typeof value === "number") {
    console.log(value.toFixed());
  } else if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else if (value instanceof Date) {
    console.log(value.getTime());
  }
}

in 타입 가드

직접 만든 타입과 함께 사용하려면 다음과 같이 in 연산자를 이용해야 한다.

type Person = {
  name: string;
  age: number;
};

function func(value: number | string | Date | null | Person) {
  if (typeof value === "number") {
    console.log(value.toFixed());
  } else if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else if (value instanceof Date) {
    console.log(value.getTime());
  } else if (value && "age" in value) {
    console.log(`${value.name}은 ${value.age}살 입니다`)
  }
}

출처

인프런 - 한 입 크기로 잘라먹는 타입스크립트