📘 타입스크립트 개념 정리06

🧠 1. 핵심 개념

✔ 서로소 유니온 타입이란?

👉 겹치지 않는 여러 타입을 하나로 합친 타입
보통 문자열 리터럴 타입(tag, state 등)을 이용해 각 타입을 구분한다.

쉽게 말하면:

• Admin 👉 관리자
• Member 👉 회원
• Guest 👉 손님

이 3개는 절대 같은 사람이 될 수 없음 → 서로 겹치지 않음

그래서 👉 서로소(disjoint)

✔ 왜 tag를 쓰냐?

type Admin = {
  tag: 'ADMIN';
}

👉 이 tag가 구분자 역할 (식별자)

즉,

• tag가 'ADMIN'이면 👉 무조건 Admin
• tag가 'MEMBER'면 👉 무조건 Member

👉 그래서 타입을 자동으로 좁혀줌 (타입 좁히기

✔ 예시

type Admin = {
  tag: 'ADMIN';
  name: string;
  kickCount: number;
};

type Member = {
  tag: 'MEMBER';
  name: string;
  point: number;
};

type Guest = {
  tag: 'GUEST';
  name: string;
  visitCount: number;
};

type User = Admin | Member | Guest;

🔥 2. 핵심 포인트

✔ TypeScript가 똑똑해지는 순간

switch (user.tag) {
case 'ADMIN':

👉 이 순간 TypeScript는
👉 "아 얘는 Admin이네?" 라고 판단

그래서 ↓ 가능

user.kickCount

❗ 따로 타입 단언 필요 없음

❌ 서로소 유니온 안 쓰면 생기는 문제

type AsyncTask = {
  state: 'LOADING' | 'FAILED' | 'SUCCESS';
  error?: { message: string };
}

👉 문제:

• error 있을 수도, 없을 수도 있음 😱

그래서 ↓ 이런거 해야됨

task.error?.message

👉 안전하지도 않고 귀찮음

✅ 서로소 유니온 쓰면?

type FailedTask = {
  state: 'FAILED';
  error: { message: string };
}

👉 state가 FAILED면
👉 error는 무조건 있음

그래서 ↓ 가능

task.error.message

✔ 타입 좁히기 (핵심)

function login(user: User) {
  switch (user.tag) {
    case 'ADMIN':
      console.log(`${user.name}님 ${user.kickCount}명 강퇴`);
      break;

    case 'MEMBER':
      console.log(`${user.name}님 ${user.point} 포인트`);
      break;

    case 'GUEST':
      console.log(`${user.name}님 ${user.visitCount} 방문`);
      break;
  }
}

👉 tag 값으로 타입이 자동으로 좁혀진다.

✔ 잘못된 방식 (선택적 프로퍼티)

type AsyncTask = {
  state: 'LOADING' | 'FAILED' | 'SUCCESS';
  error?: { message: string };
  response?: { data: string };
};

❗ 문제점

• 어떤 값이 있는지 확실하지 않음
• ?, ! 필요 → 안전하지 않음

✔ 올바른 방식 (서로소 유니온)

type LoadingTask = {
  state: 'LOADING';
};

type FailedTask = {
  state: 'FAILED';
  error: { message: string };
};

type SuccessTask = {
  state: 'SUCCESS';
  response: { data: string };
};

type AsyncTask = LoadingTask | FailedTask | SuccessTask;

✔ 사용 예

function processResult(task: AsyncTask) {
  switch (task.state) {
    case 'LOADING':
      console.log('로딩 중');
      break;

    case 'FAILED':
      console.log(task.error.message);
      break;

    case 'SUCCESS':
      console.log(task.response.data);
      break;
  }
}

✔ 장점

✅ 타입 자동 좁히기 가능
✅ 불필요한 ?, ! 제거
✅ 코드 안정성 증가
✅ 가독성 좋아짐

💡 3. 비유로 이해하기

🎫 티켓 비유

• ADMIN 티켓 👉 관리자 기능 있음
• MEMBER 티켓 👉 포인트 있음
• GUEST 티켓 👉 방문 기록 있음

👉 티켓 종류(tag) 보면
👉 어떤 기능 있는지 바로 알 수 있음

⚠️ 4.많이 하는 실수

❌ 실수 1

console.log({user.name})

👉 ❌ 틀림

👉 ${} 써야됨

console.log(${user.name})

❌ 실수 2

error?

👉 무조건 있는 값인데 optional로 만듦 → 잘못된 설계

❌ 실수 3

if ("error" in task)

👉 가능은 하지만
👉 ❗ tag/state 쓰는게 훨씬 깔끔하고 표준적

🎯 한 줄 정리

👉 "tag 같은 값으로 타입을 구분해서 안전하게 사용하는 패턴"