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

ttining·2025년 4월 3일

📌 사용자 정의 타입 가드란?

TypeScript에서 특정 타입인지 여부를 판별하는 함수로,
반환 타입을 animal is Dog 같은 형태로 지정하여 타입을 좁히는 역할을 한다.
이를 통해 조건문 내에서 올바른 타입 추론이 가능해진다.

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

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

type Animal = Dog | Cat;


1️⃣ 프로퍼티 이름을 기준으로 타입 좁히기

  • 프로퍼티명을 직접 검사하여 타입을 좁히는 방법은 유지보수성이 떨어진다.
  • 만약 프로퍼티 이름이 변경되면, 코드 전체에서 수정해야 하는 문제가 발생할 수 있다. (타입 추론이 제대로 되지 않기 때문)
function warning(animal: Animal) {
  if ("isBark" in animal) {
    console.log("강아지입니다.");
  } else if ("isScratch" in animal) {
    console.log("고양이입니다.");
  }
}


2️⃣ 사용자 정의 타입 가드 사용하기

  • animal is Dog과 같이 반환 타입을 지정하여 타입을 좁힌다.
//                             사용자 정의 타입 가드
function isDog(animal: Animal): animal is Dog {
  //      타입 단언 (타입 좁히기)
  return (animal as Dog).isBark !== undefined;
}

function isCat(animal: Animal): animal is Cat {
  return (animal as Cat).isScratch !== undefined;
}

function warning(animal: Animal) {
  if (isDog(animal)) {
    // 강아지
    animal;
  } else if ("isScratch" in animal) {
    // 고양이
  }
}
profile
내가 보려고 만든 벨로그 *'-'*

0개의 댓글