[TypeScript] 타입 가드

youngseo·2022년 6월 10일
0

Type Script

목록 보기
9/10
post-thumbnail

타입 가드

1. typeof

  • JavaScript에서 이미 존재하는 타입 검사 연산자
  • typeof 연산자는 피연산자의 자료형을 문자열로 반환
//value에는 number와 string이 들어올 수 있지만 반환은 string만 가능
function print(value: number | string): string {
  if (typeof value === 'number') {
    return String(value)
  }

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

  return value
}

2. in 연산자

  • JavaScript에서 객체가 특정 속성을 가지고 있는지 검사를 불리언으로 반환
interface Dog {
  name: string
  bark(): '멍멍'
}

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

function sayAnimal(animal: Dog | Cat) {
  if ('bark' in animal) {
    animal.bark()
    animal.name
  }

  if ('meow' in animal) {
    animal.meow()
  }
}

3. instanceof

  • JavaScript에서 이미 존재
  • instanceof 연산자는 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별
function getDate(date: Date | string): Date {
  if (date instanceof Date) {
    return date
  }

  return new Date(date)
}

4. 사용자 정의 타입 가드 - 매개변수 is 타입

위에서 사용한 getDate함수의 date instanceof Date부분을 사용자가 정의할 수 있습니다.

//1. 보통 접두사에 is라는 프리픽스를 붙입니다.
//2. 매개변수는 필수입니다.

function isDate(date: Date | string): 매개변수 is 타입 {
  return date instanceof Date
}
function isDate(date: Date | string): date is Date {
  return date instanceof Date
}

function getDate(date: Date | string): Date {
  //위에서 정의한 부분을 재활용합니다.
  if (isDate(date)) {
    return date
  }

  return new Date(date)
}

0개의 댓글