8. 기타 타입 (1)

이번 글에서는 타입 정의에 대한 기타 문법에 대해 알아보자.

 

1. 유니온

 

앞에서 알아본 타입스크립트의 타입들은 변수 하나에 하나의 타입만 표기할 수 있었다. 하지만 코딩을 하다 보면 특정 변수에 여러 가지 타입이 들어오는 경우가 많다. 타입스크립트에서는 이러한 경우를 대비하여 유니온 타입이라는 문법을 제공한다.

 

유니온 타입을 사용하는 방법은 아래와 같다. OR 연산자를 이용하여 대상 변수에 여러 개의 타입이 올 수 있다는 것을 타입스크립트의 컴파일러에게 알려줄 수 있다.

 

const unionType = string | number | boolean

 

유니온 타입을 사용하면 타입스크립트 컴파일러가 타입 추론을 할 수 있기 때문에 IDE에서 자동 완성 기능을 사용할 수 있다는 장점이 있다. 아래와 같이 유니온 타입을 사용하면 함수 내부에서 조건에 따른 분기 처리를 하면 타입 추론을 통해 적절한 자동 완성 기능을 제공받을 수 있다.

 

 

유니온 타입을 사용할 때 주의 사항이 있는데 OR 연산자를 사용하기 때문에 유니온 타입으로 묶여 있는 타입들의 프로퍼티나 메서드를 모두 사용할 수 있을 것이라고 착각하기 쉽다는 것이다. 이게 무슨 말인지 아래의 예제 코드를 통해 확인해보자.

 

예제 코드에서는 KiaSedan과 ChevySedan이라는 인터페이스를 정의하였다. 두 인터페이스는 모두 maker라는 프로퍼티를 가지고 있지만 함수는 서로 다른 것을 가지고 있다. 이 두 개의 인터페이스를 유니온 타입으로 지정해 getSedanInfo 함수의 파라미터 타입으로 지정해보았다.

 

interface KiaSedan {
    maker: string;
    getK5Info?(): object;
}

interface ChevySedan {
    maker: string;
    getMalibuInfo?(): object; 
}

const k5: KiaSedan = {
    maker: 'kia',
    getK5Info() { 
        return {
            power: 160,
            color: 'blue'
        }
    }
}

const malibu: ChevySedan = {
    maker: 'chevy',
    getMalibuInfo () {
        return {
            power: 156,
            color: 'grey'
        }
    }
}

function getSedanInfo (car: KiaSedan | ChevySedan) {
    if (car.maker === 'kia') {
        car.getK5Info()
    } else {
        car.getMalibuInfo()
    }
}

 

위의 코드는 별 문제가 없을 것으로 생각되지만 VS Code에서는 아래와 같이 에러를 출력한다. 유니온 타입을 사용할 때 실제로 접근이 가능한 속성은 유니온 타입으로 지정된 각 타입 간의 공통 속성만 가능하다. 따라서, getSedanInfo 함수에서 접근이 가능한 속성은 maker 뿐이다.

 

 

왜 유니온 타입은 공통 속성만 사용이 가능한 것일까? 이유는 어떠한 속성이 올지 모르기 때문에 서로 다른 속성을 사용하는 경우 오류가 발생할 확률이 높기 때문에 타입스크립트 컴파일러가 사전에 차단하는 것이다.

 

2. 인터섹션

 

그렇다면 묶여있는 타입들의 모든 속성을 사용하고 싶다면 어떻게 해야 할까? 타입스크립트에서는 묶여 있는 모든 타입을 하나로 합쳐 새로운 타입을 생성하는 인터섹션 타입을 제공한다. 인터섹션 타입의 사용 방법은 아래와 같다.

 

const interSection : string & number & boolean

 

유니온 타입에서 살펴본 예제 코드를 인터섹션으로 변경해보자.

 

interface KiaSedan {
    maker: string;
    getK5Info?(): object;
}

interface ChevySedan {
    maker: string;
    getMalibuInfo?(): object; 
}

const k5: KiaSedan = {
    maker: 'kia',
    getK5Info() { 
        return {
            power: 160,
            color: 'blue'
        }
    }
}

const malibu: ChevySedan = {
    maker: 'chevy',
    getMalibuInfo () {
        return {
            power: 156,
            color: 'grey'
        }
    }
}


function getSedanInfo (car: KiaSedan & ChevySedan) {
    if (car.maker === 'kia') {
        car.getK5Info()
    } else {
        car.getMalibuInfo()
    }
}

 

VS Code에서 확인하면 유니온 타입과 달리 에러가 발생하지 않는다.

 

 

3. 유니온과 인터섹션의 차이점

 

위에서 예제를 본 것처럼 유니온 타입은 묶여 있는 타입 중 공통 속성만 접근할 수 있으며, 인터섹션 타입은 묶여 있는 타입의 모든 속성을 사용할 수 있었다. 그 외에 차이점은 함수 호출 시 파라미터의 타입 체크에서 확인할 수 있는데 아래의 예제 코드를 살펴보자.

 

interface KiaSedan {
    maker: string;
    power: number;
    getK5Info?(): object;
}

interface ChevySedan {
    maker: string;
    price: number;
    getMalibuInfo?(): object; 
}

function getSedanInfo (car: KiaSedan | ChevySedan) {
    console.warn('Car > ', car.maker)
}

getSedanInfo({
    maker: 'kia',
    power: 160,
    getK5Info() { 
        return {
            power: 160,
            color: 'blue'
        }
    }
})
getSedanInfo({
    maker: 'chevy',
    price: 2895,
    getMalibuInfo () {
        return {
            power: 156,
            color: 'grey'
        }
    }
})

 

VS Code로 살펴보면 어떠한 에러도 발생하지 않는다. 유니온 타입이기 때문에 KiaSedan 타입이거나 ChevySedan 타입 중 하나만 전달되면 문제가 없다.

 

 

다음은 인터섹션 타입으로 코드를 변경해보고 동일하게 VS Code에서 살펴보자. 아까와는 달리 에러가 발생한다.

 

 

인터섹션 타입은 묶여 있는 모든 타입을 하나로 합치는 것이기 때문에 모든 타입의 속성을 넘겨줘야 한다. 아래와 같이 코드를 수정해보자.

 

interface KiaSedan {
    maker: string;
    power: number;
    getK5Info?(): object;
}

interface ChevySedan {
    maker: string;
    price: number;
    getMalibuInfo?(): object; 
}

function getSedanInfo (car: KiaSedan & ChevySedan) {
    console.warn('Car > ', car.maker)
}

getSedanInfo({
    maker: 'kia',
    power: 160,
    price: 3100,
    getK5Info() { 
        return {
            power: 160,
            color: 'blue'
        }
    }
})
getSedanInfo({
    maker: 'chevy',
    price: 2895,
    power: 156,
    getMalibuInfo () {
        return {
            power: 156,
            color: 'grey'
        }
    }
})

 

코드를 수정하면 아래와 같이 VS Code의 에러도 사라진 것을 볼 수 있다. 이러한 특징 때문에 유니온 타입이 실제 코딩에서 더 많이 사용되는 편이다. 서버로 요청하기 위해 파라미터를 전달할 때 조건에 따라 특정 속성이 추가되거나 빠지는 경우가 많기 때문이다.

 

 

---

 

지금까지 유니온과 인터섹션에 대해 알아보았다. 다음 글에서는 열거형 타입과 타입 가드에 대해 알아보자. 오늘은 여기까지~