Union Type

🔹 유니온 타입?

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

• 하나이상의 타입을 사용할수 있다.
• |를 이용해 원하는 타입을 한개 이상 사용할수 있다.

🔹 유니온 타입의 장점

// any를 사용하는 경우
function logMessage(value: any){
  console.log(value);
}

logMessage('hello');
logMessage(100);

// union type을 사용하는 경우
function logMessage(value: string | number){
  console.log(value);
}

logMessage('hello');
logMessage(100);
logMessage(true); // error

• any를 사용하면 다양한 타입을 사용할수 있지만 타입스크립트를 사용하는게 무의미 하다.(유니온타입 사용시 타입스크립트의 이점을 살려 코딩할수 있다.)
• API를 작성할때 코드가 자동 완성되지 않는다.

🔹 유니온 타입의 특징

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인터페이스의 유니온 타입으로 정의했다.
위에서 정의한 유니온타입을 기반으로 생각 한다면 Person이거나 Developer도 될수 있어 각 인터페이스들의 속성에 접근할수 있다고 생각할수 있지만 타입스크립트 관점에서는 introduce() 함수를 호출하는 시점에 Person 타입이 올지 Developer 타입이 올지 알 수가 없기 때문에 어느 타입이 들어오든 간에 오류가 안 나는 방향으로 타입을 추론하게 된다.(둘다 공통적으로 가지고 있는 속성을 반환해준다.)

결과 적으로 introduce() 함수 안에서는 별도의 타입 가드를 이용하여 타입의 범위를 좁히지 않는이상 오류만 발생시킨다.

Type Guard

function logMessage(value: string | number){
  if(typeof value === 'number'){
    value.toLocaleString();
  } else if(typeof value === 'string'){
    value.toString();
  }
 
 throw new TypeError('VALUE MUST BE STRING OR NUMBER')
}

Intersection Type

🔹 Intersection type?

• 여러 타입을 모두 만족하는 하나의 타입.
• & 연산자를 이용한다.

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

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

위의 코드와 같이 intersection type으로 정의 하면 해당 인터페이스들의 속성에 전부 접근할수 있다.

Union Type vs Intersection Type

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

Union Type

function askSomeone(someone: Developer | Person) {
 //...
}

askSomeone({ name: 'developer', skill:'web'})
askSomeone({name:'young',age:100})

• 각인터페이스의 속성들만 불러올수 있다.

Intersection Type

function askSomeone(someone: Developer & Person) {
  //...
}

askSomeone({ name: 'developer', skill: 'web', age:100})

• 조건에 충족한 인터페이스 속성을 전부 불러와야 한다.
• askSomeone({ name: 'developer', skill: 'web'}) 이와같이 일부만 불러올 경우 에러가난다.
  

참고

타입스크립트 핸드북
캡틴판교_타입스크립트 입문