유니언 타입과 인터섹션 타입

07 May 2024 in Study / Typescript

타입스크립트 타입 유니언 타입과 인터섹션 타입

• 유니언 타입
• 장점
• 주의할 점
• 인터섹션 타입

유니언 타입

유니언 타입(union type) 은 여러 개의 타입 중 한 개만 쓰고 싶을 때 사용하는 문법이다.

function union_text(text: string | number) {
	console.log(text);
}

OR 연산자의 |를 이용하여 여러 개의 타입 중 하나를 사용하겠다고 선언하는 방식이 유니언 타입이다.

---

장점

⭐ 유니언 타입을 사용해서 같은 동작을 하는 함수의 코드 중복을 줄일 수 있다.

function union_Text(text: string){
	console.log(text)
}

function union_Number(text: number){
	console.log(text)
}

function union_text(text: string | number) {
	console.log(text);
}

위의 두 코드 모두 같은 효과를 볼 수 있다.

• 중복된 코드를 줄이고 타입을 더 정확히 선언할 수 있다.

---

주의할 점

함수의 파라미터에 유니언 타입을 사용하면 함수에 어떤 값이 들어올지 알 수 없다.

⭐ 함수 내부에서 파라미터 타입의 종류에 따라 특정 로직을 실행하고 싶다면 in나 typeof 연산자 사용해서 로직을 작성하면 된다.

function introduce(someone: Person | Developer) {
	if('age' in someone) {
		console.log(someone.age)
		return
	}
	if('skill' in someone) {
		console.log(someone.skill)
		return
	}
}

introduce({ name: '봄', skill: 'ts' });

---

인터섹션 타입

인터섹션 타입(intersection type) 은 타입 2개를 하나로 합쳐서 사용할 수 있는 타입이다.

보통 인터페이스 2개를 합치거나 타입 정의 여러 개를 하나로 합칠 때 사용한다.

interface TS {
	name: string;
}

interface Level {
	skill: string;
}

function Developer(someone: TS & Level) {
	console.log(someone.name);
	console.log(someone.skill);
}

name 속성을 갖는 TS 인터페이스와 skill 속성을 갖는 Level 인터페이스를 선언하고 Developer() 함수의 파라미터에 인터섹션 타입(&)으로 정의했다.

• 인터렉션 타입은 이미 있는 타입 2개를 합칠 때 사용한다.