[Typescript] Union Type & Intersection Type

Bam·2023년 8월 23일
0

Typescript

목록 보기
15/32
post-thumbnail

이번엔 Union TypeIntersection Type에 대해 알아보겠습니다. 두 타입은 완전히 새로운 타입은 아니고 여러 타입들을 기호로 묶어서 만든 타입 정도로 생각하고 자세히 알아보겠습니다.


Union Type

유니온 타입은 조합, 결합, 뒤에 올 Intersection과 비슷한 말로하면 합집합 타입이라고 할 수 있는 타입입니다.

둘 이상의 타입을 |로 연결해 타입을 정의합니다.

let variable: number | string | boolean;

위 코드에서 variable의 타입은 number일 수도, string일 수도, boolean일 수도 있다는 것을 의미합니다. 그래서 위와같은 유니온 타입을 정의했다면 변수에는 number, string, boolean 타입의 값이 자유롭게 할당 될 수 있습니다.

let variable: number | string | boolean;

variable = 123;
variable = 'apple';
variable = true;

배열객체에도 유니온 타입을 지정할 수 있습니다.

//배열 요소에 유니온 타입 정의
let arr: (number, string, boolean)[] = [123, 'apple', true];
//객체 타입에 유니온 타입 정의
type Book = {
  title: string; 
  price: number;
};

type ComicBook = {
  title: string;
  author: string;
};

type ForSaleBook = Book | ComicBook;

위 코드에서 ForSaleBook 객체는 아래 세 가지 객체를 담을 수 있는 객체 타입이 됩니다.

let book1: ForSaleBook = {
  title: '3분 TS',
  price: 23000,
};
let book2: ForSaleBook = {
  title: '서점 주인의 방귀소리는 북',
  author: 'Leon',
};
let book3: ForSaleBook = {
  title: '손톱이 누렇게 되지 않는 귤까기',
  author: 'Clark',
  price: 50000,
};

any 대신에 Union Type을 사용하자

Union Type으로 타입스크립트에 존재하는 모든 타입을 넣는다면 any 타입 하나를 적는 것과 별 다를게 없어 보입니다.

하지만 그렇게 해서라도 any대신 Union Type을 사용하는 것이 더 많은 장점을 가지고 있습니다.

any타입은 타입 검사를 건너뛰기 때문에 TS의 장점을 발휘할 수 없다는 점과 IDE에서 any와 특정 타입을 인식하는 경우 자동완성이나 경고문 등에서 큰 차이를 보이기 때문에 Union Type을 사용하는 것이 좀 더 안정적으로 타입스크립트 프로그래밍을 할 수 있다라고 할 수 있습니다.


Intersection Type

Intersection Type교집합 타입입니다. &를 사용해서 정의합니다.

특정 타입 간에 교집합을 공유하는 경우에 해당 데이터를 할당합니다.

일반 변수 타입과 변수 타입 간의 사이에서는 공통적인 부분이 발생하지 않습니다. 그래서 일반 타입 간에서는 보통 사용하지 않고 객체 타입 사이에서만 사용됩니다.

만약, 일반 변수 타입간에서 사용하면 공통 부분이 없으므로 never타입으로 사용됩니다.

Intersection Type을 실제로 사용해보았습니다.

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

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

type Mutant = Bird & Dog;

let mutant = Mutant = {
  name: '멍짹이',
  color: 'yellow'
  species: 'gae-sae'
};

0개의 댓글