inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

사용자 정의 타입 가드

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

해결된 질문

170

gga01075

작성한 질문수 21

0

해당 강의 예시에서는


// 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인지 확인하는 함수에서는 어떻게 반환하면 될까요?

 

 

typescript

답변 1

0

이정환 Winterlood

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

우선 첫번째 질문부터 답변드리면, 모든 타입에 대해 타입 가드를 개별적으로 적용해 주셔야 합니다. 만약 타입의 종류가 매우 많아 이런 방식이 비 효율적으로 느껴지신다면 이럴때는 오히려 커스텀 타입 가드 대신 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 으로 반환값의 타입을 정의해 주셔야 합니다. 그런 다음 값을 활용하실 때에는 타입을 좁혀 활용하시면 되겠습니다.

제네릭 클래스 핸드북 페이지가 undefined라고 나옵니다.

0

7

1

적절한 타입 찾기 React.ChangeEvent<HTMLInputElemen>

0

29

2

outDir 옵션 추가 후 컴파일 오류 질문

0

64

1

호출 시그니처 질문

0

66

2

서로소 유니언 타입이 discriminated union과 동의어 인가요?

0

75

2

조건부타입소개 중 함수오버로딩 활용 시 인수의타입과 함수의 반환값의 타입이 깨지는 문제

0

67

1

할인쿠폰 관련하여

0

159

2

프론트엔드에서의 인터페이스활용

0

94

2

안녕하세요 이정환님!

0

92

1

Node.js 설치에 관한 질문입니다.

0

79

2

함수 타입 호출 시그니처

0

58

1

35강. 모듈 보강은 라이브러리 파일을 직접 편집해야 하나요?

0

64

2

인터페이스 문법이 있는데 타입 별칭 문법은 왜 있나요?

0

118

4

마우스 호버 시 정보

0

92

2

vite으로 리액트 빌드하기를 업데이트해주세요.

1

89

2

타입가드를 만들어 사용하는 이유가 궁금합니다.

0

83

2

섹션 12가 너무 어려운데... 정상이겠죠..?

0

137

2

선생님.. 알고리즘도 강의해주시면안되나요

0

100

2

선생님은 어떻게 이런걸 아세요?

0

129

1

type: module

0

97

2

7:17초 업캐스팅 질문이있습니다!

0

76

1

슈퍼타입질문

1

63

2

프로젝트 설치

0

104

2

enum은 비원시 타입이면서 열거형 타입이 되는건가요?

0

69

2