[TypeScript/타입스크립트] 리터럴, 유니온/교차 타입

[참고영상]

리터럴(Literal)

변수 선언 시 const, let 사용

둘의 차이는 const는 변하지 않는 값을 선언할 때, let은 변할 수 있는 값을 선언할 때 사용.

// Literal Types
const userName1 = "Bob";    // 문자열 리터럴 타입
let userName2:string | number = "Charlie";

userName2 = 3;

• userName1처럼 정해진 string 값을 가진 것을 문자열 리터럴 타입이라고 함.

 

유니온(Union)

// Union Type
let userName2:string | number = "Charlie";

userName2 = 3;

• userName2처럼 타입을 지정해주면 userName2 변수에는 string 타입과 number 타입 모두 저장 가능함. 이런걸 바로 유니온 타입이라고 함.

// Union Types
interface Car2 {
    name: "car";
    color: string;
    start(): void;
}

interface Mobile {
    name: "mobile";
    color: string;
    call(): void;
}

function getGift(gift: Car2 | Mobile) {
    console.log(gift.color);
    gift.start();
}

이렇게 작성하면 Mobile에는 start() 메소드가 없기 때문에 아래와 같이 gift.start()에 에러가 발생한다.

그러므로 아래와 같이 명시적으로 나타내주어야 함.

function getGift(gift: Car2 | Mobile) {
    console.log(gift.color);
    if(gift.name === "car"){
        gift.start();
    }else{
        gift.call();
    }
}

이렇게 동일한 속성의 타입을 다르게 하여 구분할 수 있는 것을 식별 가능한 유니온 타입이라고 함.

검사해야할 항목이 많아진다면 if문보다는 switch문이 더 효과적.

 

교차 (Intersection)

교차 타입은 여러 개의 타입을 하나로 합쳐주는 역할을 함.

// Intersection Types
interface Car3 {
    name: string;
    start(): void;
}

interface Toy {
    name: string;
    color: string;
    price: number;
}

const toyCar: Toy & Car3 = {
    name: "타요",
    start() {},
    color: "blue",
    price: 1000,
}

교차 타입으로 타입을 지정한 toyCar에는 Toy와 Car3의 속성들을 모두 넣어주어야 에러가 발생하지 않는다.