FrontEnd/TypeScript

[TypeScript] UnionType 과 IntersectionType

살찐만두 2022. 6. 28. 09:58
728x90

유니온 타입은 간단히 말하면 하나의 타입 이상을 쓸 수 있게 하는 것이다.

function logMessage(value: string | number ){
    if(typeof value === 'number'){ //value의 타입을 number로 정의 any라면 어떤 타입이 들어오는지를 볼 수 없지만 유니온은 명시가 되어있기 때문에 바로 사용할 수 있음
        value.toLocaleString();
    }
    if(typeof value === 'string'){
        value.toString();
    }
    throw new TypeError('value must be string or number');
}

' | ' or 연산자와 비슷한 애로 타입을 골라서 쓸 수 있다는 것이다. 

any로 타입을 정의 했을 때는 어떤 타입이 들어올 지 볼 수 없지만 유니온 타입을 쓰면 명시가 되어있기 때문에

보고 활용하기 쉽다.

 

파라미터나 변수에 한가지 이상의 타입을 쓰고 싶다면 유니온 타입을 쓰는 것을 추천한다.

 

그런데 

interface 같은 구조체를 타입으로 활용할 때 

askSomeone 함수에서 유니온 연산자를 썼는데 skill 속성이 안불러지는 걸 볼 수 있다. 

모든 속성을 접근 할 수 있을 것 같지만 공통속성인 name 에 대해서만 활용 할 수 있다.

함수를 활용 할 때에도 Developer 나 People에 해당하는 속성을 각각 따로 사용할 수 있다.

 

Intersection 타입은 ' & ' 로 쓰는데,

 

이는 두 구조체를 하나의 타입으로 받는다는 뜻으로 모든 속성과 타입을 사용할 수 있다.

그리고 함수를 활용할 때에는 한가지 구조체에 해당하는 속성만을 사용할 수 없고,

두가지 속성이 모두 충족해야 한다.

728x90

'FrontEnd > TypeScript' 카테고리의 다른 글

[TypeScript] Enum?  (0) 2022.06.28
[TypeScript] TypeScript 기본 타입  (0) 2022.06.28
[TypeScript] TypeScript 시작하기  (1) 2022.06.27