[TypeScript] 타입스크립트 기초 (3) - 유니온 타입과 인터섹션 타입

 

 유니온 타입 ' | '

 

특정 타입을 여러개 쓸 수 있게 해준다.

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

파라미터.을 찍으면 해당하는 타입의 API를 자동완성을 통해 쉽게 이용할 수 있다.

var todo: string | number | boolean;

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 인터섹션 타입

아래의 예시에서 유니온 타입은 Developer 파라미터나 Person 파라미터가 들어가면 되지만,

인터섹션 타입은 Developer, Person 파라미터 속성 모두 합쳐서(name, skill, age) 들어가야 한다.

interface Developer {
  name: string;
  skill: string;
}

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

// 유니온 타입
function askSomeone(someone: Developer | Person) {
}
askSomeone({ name: '개발자', skill: '타입스크립트'});
askSomeone({ name: '이안', age: 28 });


// 인터섹션 타입
function askSomeone(someone: Developer & Person) {
}
askSomeone({ name: '이안', age: 28, skill: '타입스크립트'}); // 하나라도 누락시 오류