(Typescript) 유니온 타입(|)과 인터섹션 타입(&)이란? 사용법 정리

 

 

 

이번 포스팅에서는 타입스크립트에서 사용되는 유니온 타입(|)과 인터섹션 타입(&)을 다룬다. 

 

생김새는 기존 자바스크립트의 논리연산자(||, &&)와 유사하게 생겼지만, 사용법은 전혀 다르다. 

 

이번 포스팅에서는 타입스크립트에서 해당 타입이 어떻게 사용되는지 정리하고자 한다. 

 

 

유니온 타입 (Union Type, |)

유니온 타입은 여러 타입 중 하나의 타입을 가지는 타입을 정의할 때 사용된다.

 

예를 들어 해당 타입이 문자열 또는 숫자 중 하나가 될 수 있다면 string | number 이런 식으로 표현할 수 있다. 

let score: number | string;
score = 98;
score = "100";

 

배열도 유니온 타입으로 설정할 수 있다. 

 

다만 배열은 괄호를 어떻게 사용하느냐에 따라 차이가 발생할 수 있다. 

 

예를 들어 해당 배열이 문자열만 포함하는 배열이거나 숫자만 포함하는 배열이라면 string [] | number [] 이렇게 표기할 수 있다.

 

하지만 만약 해당 배열이 문자열과 숫자 요소를 모두 포함한다면 (string | number)[] 이렇게 표기해야 한다.

let score: number[] | string[];
score = [98, 70, 20, 25];
score = ["100", "90", "22", "55"];


let score: (number | string)[];
score = [98, 70, "100", 25, "90"];

 

유니온 타입을 이용하면, 다양한 리터럴 타입을 적용할 수도 있다. 

 

아래 예시에서는 해당 타입을 참조한다면, 상단에 정의한 5개의 리터럴 타입만 적용할 수 있다.

 

그 외의 타입을 적용한다면 에러가 발생한다. 

type grade = "A" | "B" | "C" | "D" | "F";
let math: grade = "A";
let english: grade = "fail"; //error!

 

 

 

인터섹션 타입 (Intersection Type, &)

인터섹션 타입은 여러 타입을 모두 포함해 만족하는 타입을 정의할 때 사용된다.

 

따로 정의한 타입을 여러 개 적용할 때 사용된다. 

interface Animal {
    name: string;
    age: number;
}

interface Dog {
    breed: string;
}

let choco: Animal & Dog = {
    name: "choco",
    age: 5, 
    breed: "bichon"
};