본문 바로가기
개인공부/캡틴판교 TS

7. 유니언타입, 인터섹션타입

by 뭉지야 2023. 5. 7.
728x90

union type  유니언타입 :  파라미터나 변수에 하나이상의 타입을 쓰고싶을때

 

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

 

타입 가드: 특정 타입으로 타입의 범위를 좁혀 나가는(필터링 하는)과정

var seho: string | number | boolean;
function logMessage(value: string|number){
    //console.log(value);
    if(typeof value === 'number'){
        value.toLocaleString();   //유니언타입의 장점?
    }
    if(typeof value === 'string'){
        value.toString();
    }
    //string과 number가 아닌 거에 대해서 에러를 발생시킬수있다.
    throw new TypeError('에러메세지');
}
logMessage('hello');
logMessage(100);

 

 

< 유니언 타입의 특징>

공통된 것만 접근할수있다 !!!

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

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

function askSomeone(someone: Developer | Person){
    //skill과 age는 접근할수없다!!!!
    //skill과 age를 사용하고 싶으면 if문 써야한다!
    someone.skill;  //에러
    someone.age; //에러
    //name만 접근할수있다
    someone.name; //가능
}

< 인터셉션 타입 (&) 소개 >

인터셉션 타입 => 그리고 그리고 그리고 개념으로 생각해라. and and and

var capt: string & number & boolean; 

// and의 의미이다.그래서 여기는 never
function askSomeone(someone: Developer | Person){
   //여기서는 교집합 개념
   someone.name;
}


function askSomeone(someone: Developer & Person){
    someone.name;
    someone.skill;
    someone.age;
    //여기서는 합집합 개념이다.
    //근데 이해가 안가...... 아까는 밑에서 교집합개념이라며.....
}

저 위에 혼란스러운 부분을 정리하자!!!

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

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

저렇게 타입이 정해져있다고 하자.

 

객체로 쓰일때 

-유니언타입(|)은  둘의 공동적인건 꼭 들어있어야한다. (name은 꼭 들어있어야하고, 다른건 추가적으로 들어가도 안들어가도 상관없다.)

-인터섹션타입(&)은 전체 다 있어야한다.(name, skill, age)

 

리터럴형식으로 쓰일때

-유니언타입(|)은 or의미이다. 

-인터섹션타입(&)은 다 공통으로 있어야한다.(공통적인게 없으면 never)

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

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

var seho: string | number | boolean;   //or의미
var capt: string & number & boolean;   //never

 

 

<유니언타입과 인터섹션 타입의 차이점>

 function askSomeone(someone: Developer | Person){
 }
 
 
askSomeone({ name:'디벨로퍼', skill: '웹 개발'});
askSomeone({ name:'디벨로퍼', age: 100});
function askSomeone(someone: Developer & Person){
    someone.name;
    someone.skill;
    someone.age;
}


askSomeone({ name:'디벨로퍼', skill: '웹 개발', age: 100});
728x90

'개인공부 > 캡틴판교 TS' 카테고리의 다른 글

10. 제네릭  (0) 2023.05.07
9. 클래스  (0) 2023.05.07
6. 타입별칭, 타입과 인터페이스차이  (1) 2023.05.07
5. 인터페이스  (0) 2023.05.07
3-3. 실습  (0) 2023.05.07