[TS] is 사용해서 타입가드 만들어보기

타입가드에는 여러 방법이 있다.

여기선 is를 이용한 타입가드를 가볍게 알아보고자 한다.

 

결론

아래 처럼 is 사용하기!

		const isTypeA = (item): item is AType => {
			return item.hasOwnProperty('QWER');
		}

 

 

나의 경우엔  2가지 타입이 담겨있는 배열에

map 함수를 쓸 때 문제가 발생했다.

map을 통해서 AType일 때, BType일 때 각각의 다른 렌더링을 줬다.

(AAA는 AType에만, BBB는 BType 에만 있는 속성이다.)

 

 

하지만?

저렇게 해 두어도

BType에는 AAA가 없다!

does not exist on type....

는 타입에러가 발생했다.

 

어 그럼 typeof를 쓰면 타입이 나오려나?

하는 말도 안 되는 생각을 순간 했지만

찍혀 나오는 건 'object' 뿐, 너무 멍청하고

 

이럴 땐

item.AAA? 조건문을 다른 타입을 예측해 주는 함수로 바꿔주면 된다!

아래의 isAAA처럼!

 

item is AType 

부분은 type predict 하는 역할을 한다.

혹시나 해당 부분만 지운다면.. 

바로 귀신같이 에러가 발생하므로 주의!!!!

 

 

---

 

 

다른 타입가드 방식은..

 

간단한 string, object 에는 위에 언급한 typeof 사용가능하고,

값이 확실한 경우 key 값 비교 시 in으로 단순 비교가능하다.

때문에 사실 위 문제도

 

 

이렇게 바꾸어도 타입에러는 사라진다 ^오^

하지만 is는 신박했잖아 한잔해~

 

---

 

그렇다면..

item.AAA 와 AAA in item

의 차이는 뭘까?

 

 

훌륭한 GPT 센세의 말을 빌리자면

item.AAA 가 false 일 때의 의미는

값이 존재하지 않을 때도 있지만,

값이 있는데 0이나 false 값인 경우도 있다. -> 타입 에러 발생가능!!!

 

반면 in 비교는 확실히 해당 값이 존재하지 않는다는 것만

확인해 주기에 타입문제 해결이 가능하다

 

 

 

 

 

끝