[타입스크립트] 연산자를 이용한 타입 정의

연산자를 사용해 타입을 정의할 수도 있습니다.

| 연산자를 사용하는 유니온 타입과 & 연산자를 사용하는 인터섹션 타입이 있습니다.

각각의 타입이 가지는 장점과 주의점이 있는데, 살펴보았습니다.

1. 유니온 타입

유니온 타입은 마치 자바스크립트의 OR 연산자처저럼 사용됩니다.

| 연산자(|| 두 개 아니고 한 개!)를 사용하여 여러 타입을 정의합니다.

 

//1. 유니온 타입
function unionFunc(value: string | number | boolean){
  console.log(value);
}

1-1. 유니온 타입의 장점

유니온 타입의 장점으로는, 여러 타입을 지정해줄 수 있으므로 타입별 API(메서드)를 자동완성으로 불러올 수 있다는 것입니다. 만약 모든 타입이라는 뜻의 any를 사용했다면, 어떤 타입이 올 지 모르므로 타입에 따른 API를 자동완성으로 쓸 수 없었는데, 유니온 타입으로 여러 개를 정의해주면 타입에 맞는 API를 자동완성 기능으로 활용할 수 있습니다.

 

//1-1. 유니온 타입의 장점: 타입별 자동 완성
function showMessage(value: string | number | boolean){
  if(typeof value === 'string') {
    value.toString();
  }
  if(typeof value === 'number') {
    value.toLocaleString();
  }
  throw new TypeError('type must be string or number');
}

1-2. 유니온 타입 주의할 점

위에서 살펴본 것처럼 함수의 parameter 부분에 타입을 직접 지정해줄 수도 있지만, 인터페이스를 미리 정의하여 사용할 때에도 | 연산자를 이용한 유니온 타입을 정의할 수 있습니다. 이때, 유니온 타입이 OR 연산자와 동일하다고 생각하면 다음과 같은 에러를 발생시킬 수 있습니다.

 

아래 예시에서는 Developer와 User 라는 두 인터페이스를 정의했습니다. 

함수의 parameter에 | 연산자를 사용해 두 인터페이스를 유니온 타입으로 정의해주었는데요.

공통 속성인 name으로 접근하면 에러가 발생하지 않습니다. 반면에

각각 따로 가지고 있는 skill과 age 속성에 접근하면 에러가 발생합니다.

 

//1-2. 유니온 타입 주의할 점
interface Developer {
  name: string,
  skill: string
}

interface User {
  name: string,
  age: number
}

function showUserInfo(someone: Developer | User){
  console.log(someone.name);
  console.log(someone.skill); //에러 발생
  console.log(someone.age); //에러 발생
}

 

유니온 타입을 OR 연산자와 동일하게 생각하면, 위의 에러는 이상합니다. 유니온 타입을 사용했으니 둘 중 하나라도 만족하면 접근할 수 있다고 생각이 드니까요. (강의 제공자님의 말에 따르면) 타입스크립트는 타입 에러를 내지 않는 방향으로 타입을 추론합니다. 만약 함수를 정의하고 나서 호출하면, 호출하는 시점에서는 Developer와 User 둘 중 어떤 타입이 올 지 알 수 없습니다. 실제로 사용하는 타입과 다른 것으로 미리 추론을 하면 안 되므로, 최대한 에러를 내지 않는 방법 즉 인터페이스로 정의한 두 타입에 공통적으로 들어가는 확실한 속성만 접근할 수 있게 되는 것입니다.

2. 인터섹션 타입

그렇다면 유니온 타입으로 합친 모든 타입을 사용할 수 있게 하는 방법은 없을까요? 바로 인터섹션 타입을 사용하면 됩니다.

두 타입을 & 연산자로 연결하면, 연결한 타입 모두를 만족하는 하나의 타입이 되는 것이 인터섹션 타입입니다.

 

인터섹션 타입은 연결한 모든 타입을 만족하는 하나의 타입으로 합치는 것이기 때문에,

위의 유니온 타입에서 발생할 수 있던 에러가 사라지게 됩니다. 모든 타입을 만족하니까요.

 

//2. 인터섹션 타입 -> 여러 개의 타입 정의를 하나로 합치는 것
interface Developer2 {
  name: string,
  skill: string
}

interface User2 {
  name: string,
  age: number
}

function showUserInfo2(someone: Developer2 & User2) {
  console.log(someone.name);
  console.log(someone.skill); //에러 발생하지 않음
  console.log(someone.age); //에러 발생하지 않음
}

2-1. 인터섹션 타입 주의할 점

다만 인터섹션 타입은 합친 타입이 필수값이 되어버립니다. 따라서 위에서 설명한 코드처럼 함수의 parameter 부분을 인터섹션 타입으로 정의하고 함수를 호출할 때, 인터섹션 타입으로 합친 속성 모두 사용하지 않으면 에러가 발생합니다. 이러한 단점 때문에 실무에서는 유니온 타입을 좀 더 많이 사용한다고 합니다.

 

interface Developer2 {
  name: string,
  skill: string
}

interface User2 {
  name: string,
  age: number
}

function showUserInfo2(someone: Developer2 & User2) {
  console.log(someone.name);
  console.log(someone.skill); //에러 발생하지 않음
  console.log(someone.age); //에러 발생하지 않음
}
//2-1. 인터섹션 타입 주의할 점
showUserInfo({name: '프로그래머', skill: '프론트엔드'}); //에러 발생
showUserInfo({name: '프로그래머', age: 25}); //에러 발생

---

인프런의 유료 강의 '타입스크립트 입문 - 기초부터 실전까지'를 수강하고 작성하는 글입니다.

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

(강의 제공자이신 캡틴판교 님의 타입스크립트 핸드북도 같이 참고하면 좋습니다.😇)