본문 바로가기
프로그래밍 언어/Typescript

[타입스크립트] 리터널 타입과 유니온 타입, 교차 타입

by 스코필 2024. 1. 15.

1. 리터널 타입(Literal Types)

리터널 타입은 const name = "Tom"

과 같이 정해진 값을 가진 것을 리터널 타입이라고 합니다.

 

문자열 리터널 타입

만약 프로퍼티 값을 지정된 값으로 주고 싶다면, 타입을 선언해 값을 제한할 수 있습니다. 

interface User {
  name: string;
  drink: "coffee" | "coke" | "juice";
}

// ✅
const user1: User = {
  name: "Bob",
  drink: "coffee"
};

// ❌
const user2: User = {
  name: "Tom",
  drink: "water" // error
};

 

숫자형 리터널 타입

type Age = 14 | 15 | 16;
interface Student {
  name : string;
  age: Age;
}

const student: Student = {
  name: "John",
  age : 14
}

 

2. 유니온 타입

타입스크립트의 유니온 타입은 OR 연산자와 같이 타입 A 나 B를 선택하여 의미를 부여할 수 있는 타입으로 | 기호를 사용합니다.

interface Student {
  job: "student";
  age: number;
  grade : number;
}

interface Teacher {
  job: "Teacher";
  name: string;
  age: number;
}

function getJob(human: Student | Teacher): void {
    if (human.job === "student") {
        console.log(human.job)
    } else {
        console.log(human.job)
    }
}

 

3. 교차 타입

타입스크립트의 교차 타입은 여러 개의 타입을 하나로 합칠 수 있는 타입으로 & 기호를 사용합니다.

interface Car {
  name: string;
  call(): void
}

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

const CarPhone: Car & Phone = {
  name: "galax",
  call() {},
  color: "blue",
  price: 1000
};