섹션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인지 확인하는 함수에서는 어떻게 반환하면 될까요?
답변 1
0
안녕하세요 이정환입니다.
우선 첫번째 질문부터 답변드리면, 모든 타입에 대해 타입 가드를 개별적으로 적용해 주셔야 합니다. 만약 타입의 종류가 매우 많아 이런 방식이 비 효율적으로 느껴지신다면 이럴때는 오히려 커스텀 타입 가드 대신 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





