[TypeScript] 연산자를 이용한 타입 정의(Union Type, Intersection Type)

 

유니온 타입(Union Type)

유니온 타입(Uniton Type)은 OR 연산자( || )와 같이 | 연산자를 이용하여 여러 개의 타입을 지정하여 그 중 하나만 만족하면 된다는 의미의 타입이다. 즉 유니온 타입은 A타입이거나 B타입이다 라는 의미로 사용한다.

 

만약 유니온 타입을 사용하지 않고 타입을 number, string, boolean 등 모두 다른 타입으로 정의해야 하는 경우를 생각해보자. 그러면 각 타입을 개별로 정의하는 함수를 생성하거나 타입을 any로 정의해야 할 것이다.

하지만 any로 타입을 지정하는 것보다 유니온 타입을 사용할 것을 추천한다. 그 이유는 아래 유니온 타입의 장점을 보면 알 것이다.

function logMessage(test: string): void {
  console.log(text);
}

function logMessage(text: number): void{
  console.log(text);
}

function logMessage(text: boolean): void{
  console.log(text);
}

위와 같이 유니온 타입을 사용하지 않으면 코드 길이가 매우 길어져 가독성도 좋지 않고 비효율적이다.

하지만 유니온 타입을 사용하면 해당 함수들을 하나로 합칠 수 있다.

 

function logMessage(text: string | number | boolean): void {
  console.log(text);
}

위 예시처럼 | 연산자를 사용하여 여러 개의 타입을 연결하는 방식을 유니온 타입 정의 방식이라 한다.

 

 

 

 

< 유니온 타입(Union Type)의 장점 >

유니온 타입을 사용하면 typeof를 사용해 타입 가드를 할 때 해당 타입에 맞는 메서드들이 자동으로 리스트된다. 이때 타입 가드란 특정 타입으로 타입의 범위를 좁혀나가는 과정을 말한다.

 

위와 같이 유니온 타입을 사용한 경우 score이 number 타입으로 추론되기 때문에 number 타입과 관련된 API를 자동완성할 수 있도록 해준다. 하지만 any 타입을 사용할 경우는 다르다.

 

유니온 타입이 아닌 any 타입을 사용한 경우 score이 any로 추론되어 원하는 타입과 관련된 API의 코드가 자동완성되지 않는다. 위와 같은 차이로 인해 any를 사용하는 것보다 유니온 타입을 사용할 것을 추천한다.

 

 

 

 

< 유니온 타입(Union Type)을 쓸 때 주의할 점 >

유니온 타입은 인터페이스와 같은 타입을 다룰 때 주의해야 한다. 앞서 | 연산자를 사용하여 OR 연산자와 같은 역할을 한다고 받아들였을 수도 있을 것이다. 하지만 인터페이스 타입으로 유니온 타입을 사용한 예시를 보자.

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

interface Developer {
  name: string;
  language: string;
}

function showProfile(person: User | Developer ){
  person.name;	// 정상 동작
  person.age;	// 오류
  person.language;  // 오류
}

위 코드 예시에서 showProfile 함수를 보면, 함수의 파라미터 타입을 User, Developer 인터페이스의 유니온 타입으로 정의하였다. 하지만 OR 관점에서 보면 User와 Developer 인터페이스의 age와 language에도 접근할 수 있어야 하는데 오류가 발생할 것이다.

 

이와 같은 오류가 발생하는 이유는 타입 스크립트는 User 타입이 올지 Developer 타입이 올지 알 수 없기 때문이다. 그래서 어느 타입이 들어오든 오류가 안나게 하기 위해서 두 개의 인터페이스가 모두 포함하고 있는 name 만 접근할 수 있는 것이다.

 

 

 

 

인터섹션 타입(Intersection Type)

인터섹션 타입은 여러 타입을 모두 만족하는 하나의 타입을 의미한다.

인터섹션 타입은 & 연산자를 사용하여 모든 타입을 충족하도록 할 때 사용한다.

 

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

interface Developer {
  name: string;
  language: string;
}

type Profile = User & Developer;

다음은 & 연산자를 사용해 User 인터페이스의 타입과 Developer 인터페이스 타입 정의를 합쳐 Profile 타입에 할당한 것이다. Profile의 타입은 & 연산자를 사용하였기 때문에 아래와 같이 정의될 것이다.

즉, 인터섹션 타입은 & 연산자를 사용해 여러 개의 타입을 정의한 것을 하나로 합치는 방식이라 할 수 있다.

{
  name: string;
  age: number;
  language: string;
}