📝연산자

타입스크립트에서 변수나 파라미터 반환값등의 타입을 정의할 때 연산자 기호를 이용하여 타입을 정의할 수 있다. 자바스크립트의 AND 와 OR 연산자를 이용하여 타입을 정의하는 것이다.

유니언 타입(union type)

여러 개의 타입 중 한개만 쓰고 싶을 때 사용하는 문법이다. 자바스크립트에서 OR 연산자는 여러개의 조건 중 하나만 만족하면 true를 반환한다. 마찬가지로 유니언 타입도 여러 개의 타입 중 하나만 만족하면 된다.

유니언 타입을 사용하려면 타입 다음에 | 를 써서 나열하면 된다.

function 함수명(파라미터: 타입 | 타입) {
  // 실행할 코드
}

// 예시
function introduce(text: string | number) {
  console.log(text);
}

그렇다면 여기서 의문점이 생긴다. 여러 타입 중에 하나를 선택해서 입력하는거라면 any 타입을 써도 되지 않을까?

아래 두 코드는 타입 표기만 다를 뿐 똑같다.

function introduce(text: any) {
  console.log(text);
}

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

사실 any를 적어도 된다. 하지만 any의 경우 어떤 타입의 파라미터가 들어오는지 알 수 없으므로 타입스크립트의 장점인 속성과 API를 자동 완성을 이용하지 못한다.

반면 유니언 타입을 이용한다면 타입스크립트는 타입의 범위를 예측할 수 있어 속성과 API를 자동 완성할 수 있다.

그러므로 가급적 유니언 타입을 사용하는 것이 좋다.

인터섹션 타입(intersection type)

여러 타입을 하나로 합쳐서 사용할 수 있는 타입이다. 자바스크립트 AND 연산자는 모든 조건을 만족해야 참을 반환한다. 마찬가지로 정의된 타입을 합쳐서 합친 모든 타입을 만족해야 한다는 것이다. 인터섹션은 보통 인터페이스를 합칠 때 사용하거나 타입 정의 여러 개를 하나로 합칠 때 사용한다.

유니언 타입과 마찬가지로 인터섹션 역시 &를 타입 다음에 넣어주면 된다.

interface Person1 {
  age: number;
}

interface Person2 {
  name: string;
}

function human(human: Person1 & Person2) {
  console.log(human.age);
  console.log(human.name);
}

이때 파라미터를 넘길때 Person1과 Person2에 속한 속성을 모두 입력해야 한다. 하나라도 누락된다면 에러가 발생하니 조심하자.