![[TypeScript] TypeScript 공부일지: 사용자 정의 타입가드 [6/12 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FkLxSo%2FbtsHYXAJutC%2FAAAAAAAAAAAAAAAAAAAAAL-ba5qr8qpW0JF39hLuNE7_DTTWUMuef9MABcSH3DHu%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DCC%252B%252BAGXBTM%252Frs3qF5Hv5TxPWxmc%253D)
[TypeScript] TypeScript 공부일지: 사용자 정의 타입가드 [6/12 study]Frontend/TypeScript2024. 6. 12. 23:26
Table of Contents
TypeScript 공부일지: 사용자 정의 타입가드
❗️주의
지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음
❗️사용자 정의 타입가드
/**
* 사용자 정의 타입가드
*/
type Dog = {
name: string;
isBark: boolean;
};
type Cat = {
name: string;
isScratch: boolean;
};
type Animal = Dog | Cat;
function isDog(animal: Animal): animal is Dog {
// 원래 이건데 animal.isBark !== undefined; 타입이 잘안좁혀지므로 타입 단언하면됨
// 하지만 TS는 함수의 반환값을 가지고는 타입을 잘 좁혀주지 않음
// 이럴때는 함수 자체를 타입 가드 역할을 하도록 만듬 이 함수의 반환값의 타입으로 true 일때
// animal is Dog (is 타입을 쓰면 return 값이 true면 animal을 Dog 타입으로 보라! 이런 느낌)
// 'as' 키워드란 요약하자면 '컴파일' 단계에서 타입 검사를 할 때 타입스크립트가 감지하지 못하는
// 애매한 타입 요소들을 직접 명시해주는 키워드라고 볼 수 있다
return (animal as Dog).isBark !== undefined;
}
function isCat(animal: Animal): animal is Cat {
return (animal as Cat).isScratch !== undefined;
}
function warning(animal: Animal) {
// 원래 "isBark" in animal 이거였음 프로퍼티 이름을 기준으로 타입을 좁히면 직관적으로 별로 안좋고 프로퍼티 이름이 중간에 바뀌기라도 한다면
// 타입이 제대로 좁혀지지도 않음
// 이럴때 사용하는게 사용자 정의 타입가드임
if (isDog(animal)) {
animal;
// 강아지
} else if ("isScratch" in animal) {
animal;
// 고양이
}
}
@동혁이 :: Eun_Frontend
프론트엔드 공부일지 입니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!