6. 연사자를 이용한 타입 정의

1. Union Type ( | )

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

logMessage('hello');
logMessage(100); //코드 오류(린트 오류)

function logMessage2(value: any) {
  console.log(value);
}

logMessage2('hello');
logMessage2(100); // any때문에 사용 가능

• any말고 다른 방법은 없을 까?? Union Type을 써보자!
• Union Type : 하나의 타입 이상을 사용하게 하는 것

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

logMessage3('hello');
logMessage3(100);

• Union Type의 장점
  • any을 사용할 때에는 value를 추론할 때 다양한 것들이 메소드 및 속성으로 나오게 됩니다.
  • Union Type을 이용하면 value. 을 했을 때 number에 해당되는 메소드나 속성들을 바로 볼 수 있고 사용가능합니다.

var seho: string | number | boolean;
function logMessage4(value: string | number) {
  if(typeof value === 'number'){ //타입 가드 : 특정 타입으로 타입의 범위를 좁혀나가는(필터링 하는) 과정
    value.toLocaleString(); //number에 해당하는 메소드, 속성을 보여준다.
  }
  if(typeof value === 'string'){
    value.toString(); //string에 해당하는 메소드, 속성을 보여준다.
  }
  //에러도 발생시킬 수 있다.
  throw new TypeError('value must be string or number');
}

logMessage4('hello');
logMessage4(100);

• Union Type의 특징
  • 두개의 객체를 타입으로 사용하였을 때 공통속성만 접근이 가능합니다.
  • 타입스크립트 관점에서는 어떤 값이 들어올 줄 모르기 때문에 공통 속성만 제공합니다.

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

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

function askSomone(someone: Developer | Person){
  // someone에서 접근할 수 있는 속성은 name뿐입니다.(someone. 할때 name만 보이게 됩니다.)
  someone.name
    
  // age나 skill를 사용하려면 타입가드를 이용한 방법이 있습니다.
  someone.skill // 에러
  someone.age // 에러
}

2. 인터섹션 ( & )

• 모든 타입을 만족해야하는 연산자 입니다.

var woodong: string & number & boolean; //3가지 타입을 모두 만족해야합니다.

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

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

//Developer과 Person 속성 모두를 가지게 됩니다.
function askSomone2(someone: Developer & Person){ 
  someone.name
  someone.skill // 에러가 발생하지 않습니다.
  someone.age // 에러가 발생하지 않습니다.
}

• 유니온 타입과 인터섹션을 비교해봅시다.

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

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

// 유니온 타입은 Developer 속성 or Person 속성 중 하나를 선택해서 넣어주면 됩니다.
function askSomone3(someone: Developer | Person){

}
askSomone3({name: '라면', skill: '웹 개발'});
askSomone3({name: '우동이', age: 28});

// 인터섹션 타입은 Developer and Person 모두 포함하는 새로운 타입을 넣어주면 됩니다.
function askSomone4(someone: Developer & Person){
  someone.name;
  someone.skill;
  someone.age;
}

askSomone4({name: '라면', skill: '웹 개발'}); // 에러.. age도 필요해!!
askSomone4({name: '라면', skill: '웹 개발', age:28}); // 성공

• 유니온 : 함수 내부에셔의 타입가드를 사용해 타입추론을 해야하는 작접이 존재하지만 넘기는 타입은 선택지가 생깁니다. ( 실무에서 사용빈도가 더 높습니다. )
• 인터섹션 : 두개의 타입을 모두 포함하는 새로운 타입을 만들게 됩니다.