JS' 공부흔적

[TypeScript] 리터럴, 유니온, 교차 타입이란? 본문

TypeScript

[TypeScript] 리터럴, 유니온, 교차 타입이란?

이준수 2022. 1. 18. 03:46

리터럴 타입

리터럴 타입은 정해진 값을 가지는 타입이다. JS에서 var, let을 사용하면 값의 변경이 가능하지만 const를 사용하면 값의 변경이 불가능하다. 이러한 특성을 가지는 타입을 리터럴 타입이라고 한다. 아래와 같이 type을 선언해주면 정해진 값 내에서만 선택이 가능하다.

type Job = "student" | "teacher" | "developer";

interface Person {
    name: string;
    job: Job;
}

const jun: Person = {
    name: 'jun',
    job: 'developer', // student, teacher, developer 중에서만 선택 가능
}

//숫자형에도 동일하게 적용 가능
type num = 1 | 2 | 3;
interface Student {
    name: string;
    number: num;
}

const student1: Student = {
    name: 'sally',
    number: 3
}

유니온 타입

유니온 타입은 JS에서의 OR 연산자 역할을 한다. 동일한 속성의 타입을 다르게 해서 구분하는 타입이다.

interface Car {
    name: "myCar";
    price: string;
    color: string;
    drive(): void;
}

interface MacBook {
    name: "myMac";
    price: string;
    weight: number;
    booting(): void;
}

const yourGift = (gift: Car | MacBook) => {
    console.log(gift.price); //공통된 속성만 사용 가능
	console.log(gift.color); //error
    
    if (gift.name === "myCar")
        gift.drive();
    else
        gift.booting();
}

위에서 yourGift 함수의 매개변수인 gift는 | 기호를 사용하여 Car 또는 MacBook 타입을 가질 수 있다. 이때 아무 조건이 없을 때는 Car와 MacBook의 공통된 속성만 사용 가능하다. 둘 중 하나에만 존재하는 속성을 사용하고 싶다면 위처럼 조건을 설정해야 한다.


교차 타입

교차 타입은 AND 연산자 역할을 한다. 여러 개의 타입을 하나로 합치는 타입이다.

interface Car {
    name: string;
    price: string;
    color: string;
    drive(): void;
}

interface MacBook {
    name: string;
    price: string;
    weight: number;
    booting(): void;
}

type AppleCar = Car & MacBook;

//두 interface의 속성을 모두 사용해야 한다
const appleCar: AppleCar = {
    name: 'ACar',
    price: '100000$',
    color: 'space-gray',
    weight: 2000,
    drive() { },
    booting() { }
}

위처럼 appleCar는 & 기호를 사용하여 Car와 MacBook 타입을 모두 가진다. 따라서 두 interface의 속성을 모두 사용하지 않으면 에러가 발생한다.

728x90
반응형