[TS] 사용자 정의 타입 가드

사용자 정의 타입 가드란 참 또는 거짓을 반환하는 함수를 이용해 우리 입맛대로 타입 가드를 만들 수 있도록 도와주는 타입스크립트의 문법이다.

 

type Dog = {
  name: string;
  isBark: boolean;
};

type Cat = {
  name: string;
  isScratch: boolean;
};

type Animal = Dog | Cat;

Dog와 Cat 두 개의 타입을 정의하고, 두 타입의 유니온 타입인 Animal 타입을 정의했다.

 

function warning(animal: Animal) {
  if ("isBark" in animal) {
    console.log(animal.isBark ? "짖습니다" : "안짖어요");
  } else if ("isScratch" in animal) {
    console.log(animal.isScratch ? "할큅니다" : "안할퀴어요");
  }
}

warning 함수는 매개변수로 Animal 타입의 값을 받아 동물에 따라 다른 경고를 출력한다.

• Dog 타입의 객체를 전달하면 "짖습니다" 또는 "안짖어요"를 출력
• Cat 타입의 객체를 전달하면 "할큅니다" 또는 "안할퀴어요"를 출력

 

in 연산자의 한계

in 연산자를 이용해 타입을 좁히는 방식은 좋지 않다.

 

예를 들어 Dog 타입의 프로터피 이름이 중간에 수정되거나 추가, 삭제될 경우 타입 가드가 제대로 동작하지 않을 수 있다.

type Dog = {
  name: string;
  isBarked: boolean; // isBark -> isBarked
};

프로퍼티 이름이 isBarked로 변경되었지만 warning 함수는 여전히 "isBark" in animal을 체크하므로 타입 가드가 실패한다.

 

사용자 정의 타입 가드 만들기

이럴 때에는 함수를 이용해 커스텀 타입 가드를 만드는 것이 더 안전하다.

// Dog 타입인지 확인하는 타입 가드
function isDog(animal: Animal): animal is Dog {
  return (animal as Dog).isBark !== undefined;
}

// Cat 타입인지 확인하는 타입 가드
function isCat(animal: Animal): animal is Cat {
  return (animal as Cat).isScratch !== undefined;
}

isDog 함수는 매개변수로 받은 값이 Dog 타입이면 true, 아니면 false를 반환한다.
반환값의 타입으로 animal is Dog를 정의하면, 이 함수가 true를 반환할 때 조건문 내부에서 해당 값이 Dog 타입임을 보장한다.

 

따라서 warning 함수에서 isDog 함수를 호출해 매개변수가 Dog 타입인지 확인하고 타입을 좁힐 수 있다.

function warning(animal: Animal) {
  if (isDog(animal)) {
    console.log(animal.isBark ? "짖습니다" : "안짖어요");
  } else {
    console.log(animal.isScratch ? "할큅니다" : "안할퀴어요");
  }
}