섹션5. 함수와 타입 - 사용자 정의 타입 가드 질문 - 인프런

해당 강의 예시에서는


// 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 ? "할큅니다" : "안할퀴어요");
  }
}

위의 코드와 같이 Dog와 Cat 두개를 작성하셨는데, 만약 훨씬 더 많은 동물이 있다면 그 개수만큼 사용자 정의 타입가드를 생성해야하나요? 큰 프로젝트의 경우, 가드를 해줘야할 타입이 많을 것 같고, 그만큼 코드의 양이 늘어날 것 같다고 생각되어서요!

그리고 위의 질문과 비슷할 수도 있는데 타입가드 함수의 반환값이 animal is Dog 과 같이 작성되어 animal이 Dog 으로만 추론되게끔 반환이 되는데 만약, 조건문에서 Dog 또는 Dragon인지 확인하고 그 조건문의 구현부에서 실행되는 코드가 같다면

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

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

type Dragon = {
    name : string;
    isBreatheFire : boolean;
}

type Animal = Dog | Cat | Dragon;

function isDogOrDragon(animal : Animal) {
    return (animal as Dog).isBark !== undefined || (animal as Dragon).isBreatheFire !== undefined;
}

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


function warning(animal : Animal) {
    if( isDogOrDragon(animal)) {
        // 용 또는 강아지
        console.log('강아지 또는 용입니다.');
    } else if (isCat(animal)){
        // 고양이
        console.log(animal.isScratch ? "할큅니다" : "안할퀴어요");
    }
}

사용자 정의 타입 가드 함수 isDogOrDragon에서 Dog 또는 Dragon인지 확인하는 함수에서는 어떻게 반환하면 될까요?

안녕하세요 이정환입니다.

우선 첫번째 질문부터 답변드리면, 모든 타입에 대해 타입 가드를 개별적으로 적용해 주셔야 합니다. 만약 타입의 종류가 매우 많아 이런 방식이 비 효율적으로 느껴지신다면 이럴때는 오히려 커스텀 타입 가드 대신 in 연산자를 활용하는 방안을 고려하는게 좋을 수 있습니다. 또는 서로소유니온 타입으로 각 타입을 정의하셔서 다음과 같이 해결하시는것도 좋은 방법이 될 수 있을 것 같습니다.

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

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

type Dragon = {
  type: "dragon";
  name: string;
  isBreatheFire: boolean;
};

type Animal = Dog | Cat | Dragon;

function warning(animal: Animal) {
  switch (animal.type) {
    case "dog":
      console.log(animal.isBark ? "짖습니다" : "안짖어요");
      break;
    case "cat":
      console.log(animal.isScratch ? "할큅니다" : "안할퀴어요");
      break;
    case "dragon":
      console.log("용입니다.");
      break;
  }
}

다음으로 하나의 타입가드에서 Dog이거나 Dragon이거나 둘 중 하나로 추론되도록 만들고 싶으시다면, Animal is Dog | Dragon 으로 반환값의 타입을 정의해 주셔야 합니다. 그런 다음 값을 활용하실 때에는 타입을 좁혀 활용하시면 되겠습니다.

인프런 커뮤니티 질문&답변

섹션5. 함수와 타입 - 사용자 정의 타입 가드 질문