[Typescript] 연산자를 이용한 타입 정의

타입스크립트에서는 타입을 지정할 때, 연산자를 이용하여 여러가지 형태로 지정할 수 있다.

---

유니온 타입 ( '|' )

타입을 지정할 때, 하나의 데이터에 하나 이상의 타입을 지정할 수 있게 해준다.
연산자 | 뒤에 추가하려는 타입을 작성하면 된다.

function logMessage(value: string | number) {
  console.log(value);
}

logMessage("asd"); //⭕️
logMessage(123); //⭕️

유니온 타입의 장점

typeof를 사용하여 타입가드를 하면 해당 타입에 맞는 메서드들이 자동으로 리스트된다.

타입 가드

특정 타입으로 타입의 범위를 좁혀나가는 과정

---

유니온 타입의 특징

name과 skill을 속성으로 가지는 Developer 인터페이스와, name과 age를 속성으로 가지는 Person 인터페이스를 유니온타입으로 가지도록 함수의 파라미터의 타입을 지정해보자.

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

function askSomeone(someone:Developer | Person){
  someone.name; ⭕️
  someone.skill; ❌
  someone.age; ❌
}

우리는 두 인터페이스 모두 적용될 것이라 생각하여, 파라미터에서 name, skill, age 모두 접근이 될 것이라 예상하지만 두 인터페이스의 공통 속성에만 접근할 수 있다.

이는 파라미터로 Developer 형식으로 들어올 지 Person형식으로 들어올 지 알 수 없기 때문에, 타입의 에러를 막기 위해 만들어진 타입스크립트는 보수적으로 접근하여 확실하게 존재하는 속성에만 접근이 가능해지는 것이다.

skill 속성과 age속성에 접근하려면 위의 유니온 타입의 특징에서 배운 타입가드를 사용하면 접근이 가능해진다.

---

인터섹션 타입('&')

유니온 타입은 A 또는 B 타입으로 지정하는 것이었지만, 인터섹션 타입은 A 이면서 B 인 타입을 지정해 주는 것이다.

유니온 타입이 여러 타입 중에서 선택지를 고르는 것이라면, 인터섹션 타입은 그 모든 타입을 충족하도록 강제하는 것이다.

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

//파라미터는 Developer면서 Person인 타입을 갖춰야 한다.
function askSomeone(someone: Developer & Person) {
 ~~함수 내용~~
}

askSomeone({ name: "에비", skill: "살찌기"}); ❌
askSomeone({ name: "에비", age: 16 }); ❌
askSomeone({ name: "에비", skill: "살찌기", age: 16 }); ⭕️

Developer 인터페이스와 Person 인터페이스의 타입을 모두 갖춘 새로운 타입을 만들어낸다.