Typescript - Union Type, Intersection Type, Etc.

타입스크립트의 유니온과 인터섹션 타입을 집합 관점으로 풀어 설명하는 글이다. 타입을 할당 가능한 값의 집합으로 보면 왜 유니온이 합집합이고 인터섹션이 교집합인지, 그리고 let 과 const 에서 왜 다른 에러가 나는지가 자연스럽게 이어진다. 템플릿 리터럴 타입과 객체 리터럴의 엄격 검사도 다룬다.

핵심 포인트

타입스크립트는 Structural Type System 이라 이름이 아니라 구조를 보고 할당 가능성을 판단한다. Java 나 C++ 과 다른 지점이다.
타입을 할당 가능한 모든 값의 집합으로 보면 이해가 쉬워진다. string 은 모든 문자열의 집합이고, 유닛 타입으로 딱 몇 가지만 허용하도록 좁힐 수 있다.
let 으로 선언한 변수를 유닛 타입 매개변수에 넘기면 에러가 난다. const 로 바꾸면 사라지는데, 넓은 string 이 특정 값 하나로 좁아지기 때문이다.
유니온은 세로 막대로 쓰고 OR 처럼 동작해 모든 요소를 포함한다. 인터섹션은 앰퍼샌드로 쓰고 양쪽에 모두 할당할 수 있는 값만 남긴다.
상위 타입과 하위 타입의 교집합은 하위 집합이 되고, 합집합은 상위 타입이 된다. Webtoon 이 Title 보다 좁은 타입인 예로 설명한다.

상세 정리

판단 기준은 할당 가능한지다. 특정 문자열은 모든 문자열에 할당될 수 있지만 그 반대는 성립하지 않는다.
겹치는 게 없는 두 타입을 교집합하면 어떻게 되는지도 짚는다.
유니온으로 받은 값을 다룰 때는 공통되지 않은 속성에 바로 접근할 수 없다. Webtoon 이나 WebNovel 을 받는 함수에서 한쪽에만 있는 속성을 쓰면 에러가 난다.
해결은 좁히기다. 한쪽에만 있는 속성의 존재 여부로 어느 타입인지 판별한 뒤 접근한다.
인터섹션으로 유료 웹툰 타입을 만드는 예도 든다. Paid 와 Webtoon 을 교차해 양쪽 속성을 모두 가진 타입이 된다.
중복 속성이 있으면서 타입이 다르면 그 속성은 never 가 돼 어떤 값도 할당할 수 없게 된다.
템플릿 리터럴 타입은 4.5 이상에서 쓸 수 있고, 특정 문자열로 끝나는 모든 문자열을 타입으로 표현한다.
실전 예시가 좋다. 연재와 완결을 구분해야 해서 상태 접두사를 붙이고, 단행본이 추가되고 휴재 상태가 생겨도 조합이 자동으로 늘어난다.
백엔드가 카멜 케이스를 요구해도 Capitalize 유틸리티로 첫 글자를 대문자로 바꿔 쉽게 대응한다.
이 방식으로 이벤트 핸들러 이름 타입을 만들어 React 컴포넌트에서 쓸 수 있는 함수명을 고정하는 활용도 제시한다.
마지막은 객체 리터럴의 초과 속성 검사다. title 을 가진 객체 타입에 episode 가 더 있는 변수를 넘기는 것은 되지만, 같은 값을 객체 리터럴로 직접 쓰면 알 수 없는 속성이라며 에러가 난다.
사용하는 입장에서는 변수로 넘기나 직접 쓰나 차이가 없어 보이지만, 타입스크립트가 객체 리터럴을 더 엄격하게 검사하기 때문이라고 정리한다.

왜 읽나유니온과 인터섹션을 감으로 쓰다 예상 못 한 에러에 막힌 개발자에게, 집합이라는 하나의 관점으로 전체를 다시 정리해주는 글.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Typescript - Union Type, Intersection Type, Etc.

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다