[TypeScript] 유니온 타입 vs 인터섹션 타입

 

◽ 유니온 타입

여러가지의 타입을 파이브로 연결하여 지정할 수 있다.

// 변수에 사용하기
const user = string | number

// 함수에 사용하기
function logMessage(value: string | number) {
  console.log(value);
}
logMessage('hello')
logMessage(10)

 

📄 예제

// 유니온 타입
function logMessage(value: string | number) {
  if(typeof value === 'number') {
    value.toLocaleString()
  }

  if(typeof value === 'string') {
    value.toString()
  }

  throw new TypeError('value must be string or number')
}

 

 

◽ 유니온 타입의 특징

두가지의 인터페이스를 사용한다고 선언했더라도 선언된 모든 속성을 사용할 수는 없다.

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

function askSomeone(someone: Developer | Person) {
  someone.name // 이 공통된 속성만 접근할 수 있으며
  someone.skill // 이 타입은 불가
  someone.age // 이 타입은 불가
}

 

 

 

◽ 유니온 타입의 문제점

두가지 타입을 지정하기때문에 타입이 정확하지않아서 아래와 같은 에러가 뜬다.

타입을 받은 상황에서 자동완성은 교집합만 제공한다.

 

 

 

◽ 인터섹션 타입

인터섹션 타입은 여러 타입을 모두 만족하는 하나의 타입이다.

유니온은 '|'(=파이프)로 연결했다면 인터섹션은 '&'로 연결한다.

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

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

 

 

 

◽ 유니온 타입 vs 인터섹션 타입

 

📄 유니온

각 인터페이스의 속성이 개별적으로 필요하다.

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

askSomeone({ name: '디벨로퍼', skill: '웹 개발' })
askSomeone({ name: '디벨로퍼', age: 10000 })

 

📄 인터섹션

각 인터페이스가 가진 모든 속성을 포함해야 한다.

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

askSomeone({ name: '디벨로퍼', skill: '웹 개발', age: 10000 })

 

 

---

 

 

출처

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