📘 TypeScript - 리터럴, 유니온/교차 타입

 

 

 

 

타입스크립트를 사용할 때 자주 등장하는 개념 중 하나가 바로 리터럴 타입, 유니온 타입, 그리고 교차 타입입니다. 각각의 타입은 언제, 어떻게 사용해야 하는지 명확히 알고 있으면 코드의 안정성과 가독성을 크게 높일 수 있습니다. 이번 글에서는 이 세 가지 타입을 예제를 통해 쉽게 이해해 보겠습니다.

 

 

 

🔹 리터럴 타입 (Literal Type)

리터럴 타입은 특정한 값만 허용하는 타입입니다. 변수 선언 시 const를 쓰면 해당 값 자체가 타입으로 추론되기도 합니다.

const userName1 = 'Bob';  // 타입: 'Bob'
let userName2 = 'Tom';    // 타입: string (let은 재할당 가능하므로)

userName2 = 'John'; // ✅ 가능
// userName2 = 3;   // ❌ 에러: string 타입에 숫자는 할당 불가

 

🔸 실전 예제: 직업 타입 제한하기

type Job = 'police' | 'developer' | 'teacher';

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

const user: User = {
  name: 'Bob',
  job: 'police', // ✅ 허용된 값
  // job: 'student' // ❌ 에러: Job 타입에 없는 값
};

 

🔹 유니온 타입 (Union Type)

 

유니온 타입은 여러 타입 중 하나를 사용할 수 있음을 나타냅니다. | 기호를 사용합니다.

 

🔸 실전 예제: 서로 다른 타입의 객체 처리하기

interface Car {
  name: 'car';
  color: string;
  start(): void;
}

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

function getGift(gift: Car | Mobile) {
  console.log(gift.color); // ✅ 공통 속성은 안전하게 접근 가능

  // gift.start(); // ❌ 에러: 공통 속성이 아님

  // 타입 좁히기 (Discriminated Union)
  if (gift.name === 'car') {
    gift.start(); // ✅ Car로 좁혀짐
  } else {
    gift.call();  // ✅ Mobile로 좁혀짐
  }
}

 

이렇게 name처럼 값으로 구분 가능한 고유 속성을 두면, 타입을 안전하게 구분할 수 있습니다. 이를 식별 가능한 유니온 타입이라고 합니다.

 

🔹 교차 타입 (Intersection Type)

교차 타입은 여러 타입을 모두 만족해야 하는 타입입니다. & 기호를 사용합니다.

 

🔸 실전 예제: 장난감 자동차

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

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

const toyCar: Toy & Car = {
  name: '타요',
  color: 'blue',
  price: 1000,
  start() {
    console.log("go...");
  }
};

 

Toy & Car는 Toy와 Car의 모든 속성을 포함한 객체여야 하며, 위 예제처럼 모든 속성을 구현해야 타입이 일치합니다.