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

 

   목차 

1. 유니온 타입이란?
2. 유니온 타입의 장점
3. 유니온 타입을 쓸 때 주의할 점
4. 인터섹션 타입이란?
5. 인터섹션 타입 예시와 특징

 

 

 

타입스크립트에서 연산자를 이용해 타입을 정의해보자!

 

 

 

 1. 유니온 타입 (Union Type) 이란? 

 

* 유니온 타입: 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입

 

function logText(text: string | number) {
  // ...
}

 

위 함수의 파라미터 text에는 문자열 타입이나 숫자 타입이 모두 올 수 있다.

이처럼 | 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부른다. 

 

 

---

 

 

 2. 유니온 타입의 장점 

 

any를 사용하는 경우와, 유니온 타입을 사용하는 경우를 비교하면 유니온 타입의 장점을 알 수 있다.

 

1) any를 사용할 경우

 function logMessage(value: any) {
   console.log(value);  // age의 타입이 any로 추론되기 때문에 숫자 관련된 API를 작성할 때 코드가 자동 완성되지 않는다.
   }
   logMessage("hello");
   logMessage(100);

 

 

2) 유니온 타입을 사용할 경우

 let soho: string | number | boolean;
  function logMessage(value: string | number) { // 유니온 타입 (Union Type) 
     if (typeof value === "number"){ // number에 대한 API들을 바로 자동완성으로 보여줘서 사용할 수 있게 됨
      value.toLocaleString();
     }
     if (typeof value === "string"){ // string에 대한 속성들을 바로 보여줘서 사용할 수 있게 됨
      value.toString(); // string에 대한 API들을 바로 자동완성으로 보여줘서 사용할 수 있게 됨
     }
     throw new TypeError ('value must be string or number')
    }
    logMessage("hello");
    logMessage(100);

 

 

---

 

 

 3. 유니온 타입을 쓸 때 주의할 점 

 

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: string;
}
function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작  // 공통속성만 접근할 수 있음 
  someone.age; // X 타입 오류
  someone.skill; // X 타입 오류
}

 

- 위의 코드는 introduce() 함수의 파라미터 타입을 Person, Developer 인터페이스의 유니온 타입으로 정의한 상황이다. 

- 유니온 타입은 A도 될 수 있고 B도 될 수 있는 타입이지라고 생각하면,
파라미터의 타입이 Person도 되고 Developer도 될테니까
함수 안에서 당연히 이 인터페이스들이 제공하는 속성들인 age나 skill를 사용할 수 있겠지라고 생각할 수 있다.

- 하지만 타입스크립트 관점에서는 introduce() 함수를 호출하는 시점에 Person 타입이 올지 Developer 타입이 올지 알 수가 없기 때문에 어느 타입이 들어오든 간에 오류가 안 나는 방향으로 타입을 추론하게 된다. 

-  따라서 인터페이스 같은 여러 구조체를 유니온타입으로 쓸 때, 보장된(공통된) 속성에 대해서만 제공해준다. (교집합 같은 느낌)

 

 

---

 

 

 4. 인터섹션 타입 (Intersection Type) 이란? 

 

* 인터섹션 타입: 여러 타입을 모두 만족하는 하나의 타입 (여러 개의 타입 정의를 하나로 합치는 방식)

 

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer;

 

위 코드는 Person 인터페이스의 타입 정의와 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후 Capt 이라는 타입에 할당한 코드이다. 

결과적으로 Capt의 타입은 아래와 같이 정의된다.

 

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

 

 

---

 

 

 5. 인터섹션 타입 예시와 특징 

 

interface Developer {
  name: string;
  skill: string;
}
interface Human {
  name: string;
  age: number;
}

function askSomeone(someone: Developer & Human) {
  someone.name;
  someone.skill;
  someone.age;
}

 

someone은 Developer의 name과 skill, Human의 name과 age를 모두 포함한 3개의 속성을 갖는 하나의 타입이다. (합집합 같은 느낌)