04.Custom.type.guard.md

4. 사용자 정의 타입가드

사용자 정의 타입 가드

참 또는 거짓을 반환하는 함수를 이용해 우리 입맛대로 타입 가드를 만들 수 있도록 도와주는 TS 문법

ex.

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

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

type Animal = Dog | Cat;

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

→ 2개의 타입 Dog와 Cat을 정의하고 두 타입의 유니온 타입인 Animal 타입을 정의함

다음으로 매개변수 Animal 타입의 값을 받아 동물에 따라 각각 다른 경고를 콘솔에 출력하는 함수를 만듬

그런데 이렇게 in 연산자를 이용해 타입을 좁히는 방식은 좋지 않음..

ex. Dog 타입의 프로퍼티가 다음과 같이 중간에 이름이 수정되거나 추가 또는 삭제될 경우에는 타입 가드를 제대로 동작하지 않을 수도 있음

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

따라서 이럴때는 함수를 이용해 커스텀 타입 가드를 만들어 타입을 좁히는게 더 좋음

(...)

// 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;
}

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

→ isDog 함수는 매개변수로 받은 값이 Dog 타입이라면 true 아니면 false

→ 이때 반환값의 타입으로 animal is Dog를 정의하면 이 함수가 true를 반환하면 조건문 내부에서는 이 값이 Dog 타입을 보장한다는 의미가 됨