[타입스크립트 이해하기] 대수 타입

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

chapter4.ts 에서 실습을 진행했습니다.

 

대수 타입(Algebraic) 이란?

대수 타입이란

여러 개의 타입을 합성해서 만드는 타입을 말합니다.

지난 글에서 객체 타입의 호환성을 이해해서,

대수 타입도 쉽게 이해할 수 있었습니다.

 

대수 타입에는 합집합 타입과 교집합 타입이 존재합니다.

합집합은 Union 타입, 교집합은 Intersection 타입이라고 부릅니다.

하나씩 천천히 살펴보겠습니다.

 

합집합(Union) 타입

다음과 같이

string 과 number 의 유니온 타입을 정의할 수 있습니다.

'바 (|)' 를 이용해서요.

// 합집합 타입 - Union 타입
let a: string | number;

 

이 유니온 타입을 집합으로 표현하면 다음과 같습니다.

색칠한 범위가 집합에 포함되는 범위입니다.

 

따라서 이제 변수 a 에는 number 타입과 string 타입에

해당하는 값이라면 뭐든 저장할 수 있습니다.

// 합집합 타입 - Union 타입
let a: string | number;

a = 1;
a = "hello";

 

유니온 타입에 참여하는 타입들의 개수에는

제한이 없습니다.

만약 boolean 타입도 함께 유니온 타입으로 구성하고 싶다면,

다음과 같이 그냥 추가하면 됩니다.

// 합집합 타입 - Union 타입
let a: string | number | boolean;

a = 1;
a = "hello";
a = true;

그럼 이제 a 는 boolean 타입의 값도 저장할 수 있는 변수가 됩니다.

---

Union 타입으로 배열 타입 정의하기

이렇게 살펴본 유니온 타입을 이용하면,

다양한 타입의 요소를 보관하는 배열 타입을 손쉽게 정의할 수 있습니다.

let arr: (number | string | boolean)[] = [1, "hello", true];

 

Union 타입과 객체 타입

다음과 같이 여러 개의 객체 타입의 유니온 타입도

얼마든지 정의할 수 있습니다.

type Dog = {
  name: string;
  color: string;
};

type Person = {
  name: string;
  language: string;
};

type Union1 = Dog | Person;

이렇게 정의된 Union 타입은

다음과 같이 교집합이 존재하는 두 집합으로 표현할 수 있습니다.

 

따라서 다음과 같은 객체들을 포함하는 타입이 됩니다.

(...)

let union1: Union1 = { // ✅
  name: "",
  color: "",
};

let union2: Union1 = { // ✅
  name: "",
  language: "",
};

let union3: Union1 = { // ✅
  name: "",
  color: "",
  language: "",
};

 

반면, 다음과 같은 객체는 포함하지 않습니다.

let union4: Union1 = { // ❌
  name: "",
};

---

교집합(Intersection) 타입

다음과 같이 string 과 number 의

인턱섹션 타입을 '&' 을 이용해 정의할 수 있습니다. 

let variable: number & string; 
// never 타입으로 추론된다

그런데 number 타입과 string 타입은

서로 교집합을 공유하지 않는 서로소 집합이므로

변수 variable 의 타입은 결국 never 타입으로 추론됩니다.

 

대다수의 기본 타입들 간에는 서로 공유하는

교집합이 없기 때문에 이런 인터섹션 타입은

보통 객체 타입들에 자주 사용됩니다.

 

---

Intersection 타입과 객체 타입

다음은 두 객체의 인터섹션 타입을 정의하는 예입니다.

type Dog = {
  name: string;
  color: string;
};

type Person = {
  name: string;
  language: string;
};

type Intersection = Dog & Person;

let intersection1: Intersection = {
  name: "",
  color: "",
  language: "",
};

위 코드의 Intersection 타입을 집합으로 표현하면 다음과 같습니다.

앞서 살펴본 유니온 타입의 그림과 차이점을 자세히 살펴보길 바랍니다.