TypeScript 타입 가드

타입 가드

타입을 좁혀가기 위한 과정이다.
any와 같은 넓은 범위의 타입을 좁히고 그로 인해 타입스크립트를 더욱 안정적으로 사용할 수 있다.

typeof

• javascript에서 이미 존재하는 타입 검사 연산자
• 기본형(Primitive) 타입을 타입 가드할 때 용이

// string만 반환해야 하는데 number 반환도 있어서 에러 ↓
function print(value: number | string):string {
  if(typeof value === 'number') {
    return value;
  }
  
  if(typeof value === 'string') {
    return value;
  }
  return value;
}

in

• javascript에서 이미 존재하는 타입 검사 연산자
• 객체가 특정 속성을 가지고 있는지 검사 후 boolean 반환
• 객체에 대한 타입 가드를 만들기 용이
• 속성 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

• javascript에서 이미 존재하는 타입 검사 연산자
• in 연산자와 같이 객체에 대한 타입 가드를 할 때 주로 사용
• 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별 후 boolean 반환

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);  // true
console.log(auto instanceof Object);  // true

function getDate(date: Date | string):Date {
  if(date instanceof Date) {  // Date 객체의 인스턴스일 경우 date 반환
    return date
  }
  return new Date(date)  // 아닐 경우 new Date로 바꿔서 반환
}

사용자 정의

• 사용자 정의 타입 가드
• 무조건 매개변수를 받아야 하며 그 타입을 검사하는 것
• 매개변수 is 타입

// 검사하는 함수명 앞에 is라는 prefix를 붙임
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)
}

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

function isDog(animal: Dog | Cat): animal is Dog {
  return 'bark' in animal
}
function isCat(animal: Dog | Cat): animal is Cat {
  return 'meow' in animal
}

function sayAnimal(animal: Dog | Cat) {
  if( isDog(animal) ) {
    animal.bark()
  }
  if( isCat(animal) ) {
    animal.meow()
  }
}