TypeScript intersection & union Types

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ'

| 타입 스크립트 인터섹션 & 유니온

 

| Intersection type

여러타입을 합쳐서 사용하는 타입

 

User,Action 타입을 합쳐서 반환하는 함수가 있을 때 두개의 타입을 & 통해 타입을 선언 할 수 있습니다.

interface User{
    name : string;
}

interface Action{
    do() : void;
}

function createUserAction(u: User, a: Action) : User & Action{
    return {...u,...a};
}

const u = createUserAction({ name : 'dog' }, {do(){} });

u.do();
u.name;

 

| Union type

변수 또는 함수 매개 변수에 둘 이상의 데이터 형식을 사용할 수 있다.

 

문자와, 숫자를 비교하는 함수 compare 작성 

compare 매개변수 타입에 string 또는 number 타입이 들어간다 그럴때 | 를 사용하여 타입을 지정

compare 함수는 x,y가 같은 타입일때 맞으면 0 ,x 가 y 보다 크면 1 그외는 -1을 반환 합니다.

 

compare 함수를 사용할 때 compare 함수를 overload 하지 않고 compare함수에 숫자와 문자를 넣을 경우 

runtime error가 발생할 수 있어 함수를 overload 합니다.

 

이렇게 작성한 파일을 tsc 컴파일 하여 node로 실행 해 값을 확인합니다.

function compare(x: string ,y: string) : number
function compare(x: number ,y: number) : number
function compare(x: string | number ,y: string | number){
    if(typeof x === 'number' && typeof y === 'number'){
        return x === y ? 0 : x > y ? 1 : -1;
    }

    if(typeof x === 'string' && typeof y === 'string'){
        return x.localeCompare(y);
    }

    throw Error('not supported type');
}

const a = compare(1,1);
const b = compare("a","a");
console.log([3,2,1].sort(compare))
console.log(['c','b','a'].sort(compare))


// runtime error
const v = compare(1,"b");

컴파일

타입이 iterface 또는 원시형 타입이 아닐때 

 

User type 과 Action 타입을 유니온 타입으로 정의 하고 조건문 에서 do가 있으면 Action이고 아니면 user타입일때 

타입스크립트에서 컴파일을 할 경우 interface는 실제 js코드에서 사라지기 때문에 Assertion 처리를 해주어야 합니다.

< type > 을 넣어 해당 값이 어떤 타입인지 선언

function process(v : User | Action){
    if((<Action>v).do){
        (<Action>v).do()
    }else{
        (<User>v).name;
    }
}

 

사용자 타입 가드 정의하는 방식

isAction이란 함수에 v 가 action이면 assertion처리된 값이 반환되고 아니면 값이 없다고 반환합니다.

function isAction(v : User | Action) : v is Action {
    return (<Action>v).do !== undefined;
}

function process(v : User | Action){
    if(isAction(v)){
        v.do()
    }else{
        v.name;
    }
}