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

yesolog·2023년 11월 29일

TypeScript

목록 보기
6/17

7강의 메인 주제는 유니온(Union)타입과 인터섹션(Intersection)타입의 설명 및 비교다.

1. 연산자를 이용한 타입 정의 - Union Type

유니온 타입: 하나의 타입 이상을 쓸 수 있게 만드는 것, 파이프 연산자 사용, 넣은 만큼 추가 됨

다음과 같이 logMessage라는 함수 내부 인자를 string으로 단일하게 설정하면 함수 호출시에 string만 전달 받을 수 있다.

이런 경우 string말고도 다른 타입을 전달받고 싶을 수 있는데 이걸 any로 바꿔주면 해결되지만 이런 해결방법은 타입의 장점이 사라지는 것이다.

이럴 때 타입의 장점을 살리면서 이 문제들을 해결해 나갈 수 있는 방식이 유니온 타입이다.

이 함수에서 |를 사용하여 다음과 같이 number라는 타입을 추가해 줄 경우

인자가 문자열과 숫자 타입 모두 동일하게 처리가 가능함을 볼 수 있다.

2. 유니온 타입의 장점

유니온 타입의 대표적인 장점으로는 타입가드가 있다.

Type guard: 특정 타입으로 타입의 범위를 좁혀 나가는(필터링 하는)과정

내부에서 타입검사를 했을 때 넘버가 들어오면 number의 메서드 사용이 가능하고

마찬가지로 타입검사시 해당 값이 string이라면 string의 메서드 사용이 가능하다. 이것이 바로 타입가드다.

또한 이렇게 에러도 생성할 수 있다.

3. 유니온 타입( | )의 특징

유니온 타입의 특징으로는 변수나 인자에 유니온 타입을 사용하여 여러개의 타입을 지정했을 때 공통 속성에만 접근이 가능하다는 점이다.

다음과 같이 Developoer와 Person 인터페이스를 askSomeone함수의 someone이라는 인자의 타입으로 지정하면 name이라는 속성만 자동으로 나온다.

이렇게 나오는 이유는 Developer도 되야하고 Person도 되야하는데 TS관점에서는 someone이 뭐가 될지 모르기 때문이다.

someone을 타입 검증도 없이 바로 사용하기에는 에러가 발생할 수 있기에 공통으로 접근 가능한 속성만 사용이 가능한 것!

만약 공통 속성이 아닌 skill과 age에 접근하고 싶을때는 위에서 언급한 타입가드를 사용하여 타입을 검증 한 뒤 접근해야 한다.

4. 인터섹션타입(&) 소개

인터섹션 타입(Intersection Type): 여러 타입을 모두 만족하는 하나의 타입

만약 하나의 변수에 여러 타입을 인터섹션으로 넣게 되면 다음과 같은 결과가 나온다.

Never라는 절대 불가능한 타입이 나오느데 이건 string이면서 number면서 boolean도 만족하는 타입이란건 없기 때문이다.

유니온이 아닌 인터섹션을 사용하면 Developer가 가지고 있는 속성과 Person이 가지고 있는 속성을 모두 가지고 있어야 한다.

그래서 저렇게 Developer와 Person을 인터섹션으로 타입을 지정해주면 age, name, skill 모두에 접근이 가능하다. 왜냐면 someone이라는 인자는 저 두개의 타입 형식을 모두 지녀야 하기 때문이다.

실무에서 더 많이 쓰이는 방법은 현실적으로는 유니온 타입이다. 그 이유는 유니온과 인터섹션의
차이점에서 나온다.

5. 유니온 타입( | )과 인터섹션타입(&) 차이점

유니온 타입은 다음과 같이 서로 스펙이 다른 변수를 인자로 넘겨줘도 해당 값이 유니온으로 지정한 타입중 하나에 부합하면 에러가 발생하지 않는다.

하지만 인터섹션 타입은 두 개를 모두 만족해야하기 때문에 에러가 발생한다.

인터섹션타입은 Develpoer와 Person을 모두 만족해야하기 때문에 developer라는 변수를 넘겨주면 age가 필요하고

person이라는 변수를 넘겨주면 skill이 필요하다고 나온다.

각각의 속성을 추가하면 에러는 사라진다.

0개의 댓글