캡틴판교 - 타입스크립트 입문 14강 간단 요약

yesolog·2024년 1월 30일

TypeScript

목록 보기
12/17

14강 메인 주제는 타입가드!

1. 타입 가드를 위한 예제 소개

먼저 다음과 같이 Developer라는 interfacePerson이라는 interface가 존재한다고 하자.

이때 introduce()라는 함수의 반환 타입을 Develpoer | Person 이라고 지정했을때 return 값으로 Develpoer | Person를 모두 충족하는 객체를 넣는다.

그리고 이 함수의 결과를 tony라는 변수에 할당시킨뒤 console.logskill이라는 property에 접근하면 이상한 상황이 발생한다.

위와같이 skill에 접근이 안되는 것....

분명 introduce()라는 함수의 반환값에 skill을 넣었는데 왜 안되는것인지 확인을 해보자면 유니온 타입으로 반환값을 지정했기 때문이다.

기본적으로 유니온 타입을 쓰면 이 타입들의 공통된 속성에만 접근이 가능하다. 그래서 여기에서는DevelpoerPerson 의 공통 속성인 name만 접근이 가능한 것이다.

그래서 skill이라는 속성을 사용하고 싶으면 타입단언을 사용하여 저 속성이 존재한다는 것을 보장해야한다.

하지만 이런식의 코드는... 딱 봐도 별로다... 가독성도 너무 떨어져서 사용 안하는 것이 좋다.

이럴때 사용할 수 있는것이 타입가드다!

2. 타입 가드 소개와 적용

타입가드에는 is 키워드를 사용하는 사용자 정의 타입가드가 있다.

해석을 해보자면 target으로 넘겨받은 인자를 Developer라고 가정하고 해당 targetskill이라는 속성이 undefined가 아니라면 즉, 존재하는 속성이라면 해당 타입은 Developer가 맞다고 본다. 따라서 해당 함수의 리턴 값은 targetDeveloper가 맞기 때문에 true가 반환되는 것이다. 이것을 통해 해당 함수의 타입이 Developer인지 아닌지 확인할 수 있다.

타입가드를 사용하면 다음과 같이 해당 반환값이 trueDeveloper일 경우에는 nameskill로 접근이 가능하며 false인 경우에는 즉 Person 타입의 경우에는agename으로 접근이 가능하게 된다.

0개의 댓글