Typescript 유니온, 인터섹션 타입

오늘은 typescript의 union type과 intersection type을 알아보겠습니다.

 

일반적으로 타입을 선언하기 하기 위해서는 아래와 같습니다.

function logString(item: string){
	console.log(item);
};
logString("hello");

 

똑같은 로직을 처리하지만 타입만 다른 경우는 어떨까요?

function logString(item: string){
	console.log(item);
};
function logNumber(item: number){
	console.log(item);
};

logString("hello");
logNumber(1);

타입만 다르게 하여 함수를 두 번 선언하여야 합니다.

이렇게 되면 불필요한 중복이 생깁니다.

 

 

 

Union Type

---

유니온타입을 사용하면 여러 개의 타입 중 하나를 사용할 수 있습니다.

타입 세로 막대 " | " 로 구분합니다. or의 개념입니다.

 

function logParams(item: string | number | boolean){
	console.log(item);
}
logParams("hello");
logParams(1);
logParams(false);

" string | number | boolean " 이라면 string, number, boolean 셋 중 하나가 될 수 있음을 의미합니다.

함수뿐만 아니라 변수, 인터페이스, 타입안에서도 사용 가능합니다.

 

// 인터페이스
interface IStringNumber{
    item: string | number;
}
const interString:IStringNumber = {item:"Hello"}
const interNumber:IStringNumber = {item:1}

// 타입
type TStringNumber = string | number;
const typeString:TStringNumber = "Hello";
const typeNumber:TStringNumber = 123;

// 변수
let stringNumber:string | number;
stringNumber = "Hello";
stringNumber = 1;
stringNumber = false; // 오류

 

인터페이스를 유니온타입으로 사용할 수 있습니다.

interface IDeveloper{
	name: string;
	skill: string;
}

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

function logItem(item: IDeveloper | IPerson){
	console.log(item);
};
logItem({name:"song", skill:"react"});
logItem({name:"song", age: 00});

 

 

 

Intersection Type

---

유니온 타입이 or이라는 개념이었다면 인터섹션 타입은 and 개념입니다.

 

interface IDeveloper{
	name: string;
	skill: string;
}

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

function logItem(item: IDeveloper & IPerson){
	console.log(item);
};

logItem({name:"song", skill:"react", age:00}); // 성공
logItem({name:"song", skill:"react"}); // 오류 - age가 없습니다.
logItem({name:"song", age:00}); // 오류 - skill이 없습니다.

매개변수 item의 타입은 IDeveloper & IPerson입니다.

그렇게 되면 item 다음과 같은 타입이 됩니다.

{
	name: string;
	skill: string;
	age: numer;
}

 

 

 

주의점

---

유니온 타입의 경우 공통된 타입만 사용할 수 있습니다.

interface IDeveloper{
	name: string;
	skill: string;
}

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

function logItem(item: IDeveloper | IPerson){
	console.log(item.name); // 성공 - 공통된 값입니다.
	console.log(item.skill); // 오류 - 한쪽 타입에만 있습니다.
	console.log(item.age); // 오류 - 한쪽 타입에만 있습니다.
};
logItem({name:"song", skill:"react"});
logItem({name:"song", age: 00});

그림으로 표현하면 아래와 같습니다.

 

 

 

참고 : 

https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html

https://typescript-kr.github.io/pages/unions-and-intersections.html