[Typescript 5] 유니언타입, 인터섹션 타입

아무 타입이나 들어갈 수 있는 any

그렇지만 타입스크립트이 장점을 활용할 수 없는 단점이 있다.

 function logMessage(value: any) {
     console.log(value);
 }
 logMessage('hello');
 logMessage(100);

한개 이상의 타입을 설정할 때 |, 유니언타입

var sarah: string | number | boolean; // 3개중 하나 쓸 수 있음

 function logMessage(value: string | number) { // 파라미터  value값으로 string 또는 number
     if(typeof value === 'number') {
         value.toLocaleString(); 
         // value가 number인게 확인되므로 코딩시 number 함수인 toLocaleString자동완성이 제공된다. any타입이었다면 불가능
         // 이렇게 특정타입으로 좁혀가는 것(필터링하는 것)을 '타입 가드'라고 한다
     }
     if(typeof value === 'string') {
         value.toString();
     }
     throw new TypeError('Value must be string or number')
 }
 logMessage('hello');
 logMessage(100);

유니언 타입 사용시 함수에선 어떤 인자가 올지모르니 공통된(name)부분만 사용가능

  interface Developer {
     name: string;
     skill: string;
 }
 interface Person {
     name: string;
     age: number;
 }
 
// askSomeone입장에선 Developer를 타입이 올지 Person타입이 올지 모르기 때문에 공통인 name만 가능
 function askSomeone(someone: Developer | Person) {
     someone.name;
 }
askSomeone({name: '개발자', skill: 'js'}); // Developer인터페이스만 적용하거나
askSomeone({name: '개발자', age: 20}); // Person인터페이스만 적용할 수 있다.
 
  // askSomeone함수에서 skill이나 age를 사용하고 싶다면 if문을 이용하여야 한다
  function askSomeone(someone: Developer | Person) {
     someone.name;
    if(someone === Developer) {
        someone.skill;
    }
    if(someone === Person) {
        someone.age;
    }
 }
 

Developer & Person 인터섹션 타입,

유니언타입과 다르게 공통뿐만 아니라 각각의 인터페이스가 합친 타입

 
 function askSomeone2(someone: Developer & Person) { 
     someone.name;
     someone.age;
     someone.skill;
 }
askSomeone({name: '개발자', skill: 'js', age: 20}); // 인터섹션 타입의 경우 Developer와 Person의 합, 따라서 age까지 필수

@Sarah
개인적인 공부를 위해 만든 블로그입니다. 혹시 틀린 점이 있다면 메일로 남겨주시면 감사하겠습니다!

GitHubGmail