[TS series] TS 기본문법 #7

UnionType

유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 'A' 이거나 'B'이다 라는 의미의 타입입니다.

위 사진처럼 타입을 여러가지 지정해 줄 수 있습니다.

type Points = {
    x : number;
    y : number;
}

type Loc = {
    lat : number;
    long : number;
}

let coordinate2: Points | Loc = {x:1 , y:2}
coordinate2 = { lat: 11.23 , long: 22.35}

이렇게 타입을 미리 지정하여 사용할 수도 있습니다.

Union type의 함수

함수를 하나 만들어 보겠습니다.

function calculateTax(price : string | number, tax: number) {
    return price * tax
}

위 코드는 겉보기엔 전혀 문제가 없어 보일 수 있습니다.

실제로 코드를 입력하면 다음과 같이 오류를 표시합니다.

return 안의 price가 문자열 타입도 반환할 수 있기 때문에 그렇습니다.

이런경우 타입스크립트는 똑똑하기 때문에 다음과 같이 처리할 수 있습니다.

function calculateTax(price : string | number, tax: number) {
    if (typeof price === "string") {
        price.replace("$","")
    }else {
        price * tax
    }
}

이처럼 문자열 타입, 숫자형 타입을 분류하여 처리하면 유니온 타입의 매개변수를 동시에 두 타입을 사용할 수 있습니다.

Union type의 배열

const array1: number | string[] = ["as", 1]

const array2: (number | string) [] = ["as", 1]

배열의 타입을 두가지 이상 사용하려면 다음과 같이 유니온 타입을 지정해 줄 수 있습니다.

자세히 보면 array1과 array2는 조금 다른 모양을 가지고 있는데요! 어떤 차이가 있을까요?

위 사진처럼 첫번째 배열은 오류를 나타냅니다!

첫번째 배열처럼
"괄호를 감싸지 않은 타입은 배열의 타입이 숫자형 타입 혹은 문자형배열 타입으로만 지정한다" 라는 의미이고,

두번째 배열은
"숫자형과 문자형 타입을 둘다 포함한다"
라는 의미입니다!

그럼 첫번째 배열의 오류를 수정하려면 다음과 같이 입력하면 되겠죠?

const array1: number | string[] = ["as", 1] // error
array = 2 
array = "as" // error
array = ["as"]