Discriminated Union으로 상태 관리 설계하기

interface ApiResponse {
  status: string;
  data?: UserProfile;
  error?: string;
  retryAfter?: number;
}

// 타입 에러 없이 통과하지만, 논리적으로 말이 안 되는 상태
const nonsense: ApiResponse = {
  status: "success",
  error: "실패했습니다",    // 성공인데 에러?
  retryAfter: 3000,        // 성공인데 재시도?
};

type Animal =
  | { name: "오리"; sound: "꽥꽥"; legs: 2; habitat: "연못" }
  | { name: "병아리"; sound: "삐약"; legs: 2; habitat: "농장" }
  | { name: "강아지"; sound: "멍멍"; legs: 4; habitat: "집" };

function describe(animal: Animal) {
  if (animal.name === "오리") {
    // 이 블록 안에서 TypeScript는 animal의 타입을 아래로 좁힙니다:
    // { name: "오리"; sound: "꽥꽥"; legs: 2; habitat: "연못" }
    console.log(animal.sound);   // 타입: "꽥꽥"
    console.log(animal.habitat); // 타입: "연못"
  }
}

// ✅ 올바른 판별자
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rectangle"; width: number; height: number };
 
// ❌ 작동하지 않는 판별자: string은 리터럴이 아님
type BadShape =
  | { kind: string; radius: number }
  | { kind: string; width: number };

type ApiResponse<T> =
  | { status: "success"; data: T; timestamp: number }
  | { status: "error"; code: number; message: string }
  | { status: "loading" };
 
function handleResponse(response: ApiResponse<UserProfile>) {
  switch (response.status) {
    case "success":
      // response.data: UserProfile (확정)
      // response.timestamp: number (확정)
      renderProfile(response.data);
      break;
 
    case "error":
      // response.code: number (확정)
      // response.message: string (확정)
      showError(response.code, response.message);
      break;
 
    case "loading":
      // 이 멤버에는 data도 code도 없음
      showSpinner();
      break;
  }
}

type PaymentMethod =
  | {
      type: "card";
      cardNumber: string;
      expiryDate: string;
      cvc: string;
    }
  | {
      type: "bank-transfer";
      bankCode: string;
      accountNumber: string;
      accountHolder: string;
    }
  | {
      type: "phone";
      carrier: "SKT" | "KT" | "LGU+";
      phoneNumber: string;
    };

function PaymentFields({ method }: { method: PaymentMethod }) {
  switch (method.type) {
    case "card":
      return (
        <>
          <Input label="카드 번호" value={method.cardNumber} />
          <Input label="만료일" value={method.expiryDate} />
          <Input label="CVC" value={method.cvc} />
        </>
      );
 
    case "bank-transfer":
      return (
        <>
          <Select label="은행" value={method.bankCode} />
          <Input label="계좌번호" value={method.accountNumber} />
          <Input label="예금주" value={method.accountHolder} />
        </>
      );
 
    case "phone":
      return (
        <>
          <Select label="통신사" value={method.carrier} />
          <Input label="전화번호" value={method.phoneNumber} />
        </>
      );
  }
}

type TodoAction =
  | { type: "ADD"; payload: { title: string; priority: "high" | "medium" | "low" } }
  | { type: "TOGGLE"; payload: { id: string } }
  | { type: "DELETE"; payload: { id: string } }
  | { type: "EDIT"; payload: { id: string; title: string } }
  | { type: "REORDER"; payload: { fromIndex: number; toIndex: number } };
 
function todoReducer(state: TodoState, action: TodoAction): TodoState {
  switch (action.type) {
    case "ADD":
      // action.payload: { title: string; priority: "high" | "medium" | "low" }
      return {
        ...state,
        items: [...state.items, createTodo(action.payload.title, action.payload.priority)],
      };
 
    case "TOGGLE":
      // action.payload: { id: string }
      return {
        ...state,
        items: state.items.map((item) =>
          item.id === action.payload.id ? { ...item, done: !item.done } : item
        ),
      };
 
    case "REORDER":
      // action.payload: { fromIndex: number; toIndex: number }
      return {
        ...state,
        items: reorder(state.items, action.payload.fromIndex, action.payload.toIndex),
      };
 
    // ...나머지 케이스
  }
}

type ModalProps =
  | {
      variant: "alert";
      title: string;
      message: string;
      onConfirm: () => void;
    }
  | {
      variant: "confirm";
      title: string;
      message: string;
      onConfirm: () => void;
      onCancel: () => void;
    }
  | {
      variant: "custom";
      title: string;
      children: React.ReactNode;
    };
 
function Modal(props: ModalProps) {
  switch (props.variant) {
    case "alert":
      return (
        <DialogBase title={props.title}>
          <p>{props.message}</p>
          <Button onClick={props.onConfirm}>확인</Button>
        </DialogBase>
      );
 
    case "confirm":
      return (
        <DialogBase title={props.title}>
          <p>{props.message}</p>
          <Button variant="secondary" onClick={props.onCancel}>취소</Button>
          <Button onClick={props.onConfirm}>확인</Button>
        </DialogBase>
      );
 
    case "custom":
      return (
        <DialogBase title={props.title}>
          {props.children}
        </DialogBase>
      );
  }
}

// ❌ 컴파일 에러: "alert" 멤버에 onCancel이 없음
<Modal variant="alert" title="알림" message="완료" onConfirm={fn} onCancel={fn} />
 
// ✅ 올바른 사용
<Modal variant="confirm" title="확인" message="삭제할까요?" onConfirm={fn} onCancel={fn} />

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rectangle"; width: number; height: number }
  | { kind: "triangle"; base: number; height: number };
 
function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "rectangle":
      return shape.width * shape.height;
    case "triangle":
      return (shape.base * shape.height) / 2;
    default: {
      const _exhaustive: never = shape;
      return _exhaustive;
    }
  }
}

function assertNever(value: never, message?: string): never {
  throw new Error(message ?? `Unexpected value: ${JSON.stringify(value)}`);
}
 
function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "rectangle":
      return shape.width * shape.height;
    case "triangle":
      return (shape.base * shape.height) / 2;
    default:
      assertNever(shape, `지원하지 않는 도형: ${(shape as Shape).kind}`);
  }
}

type HttpEvent =
  | { type: "request"; url: string; method: "GET" | "POST" }
  | { type: "response"; status: number; body: unknown }
  | { type: "error"; code: string; message: string }
  | { type: "timeout"; duration: number };
 
// 특정 멤버 추출
type ErrorEvent = Extract<HttpEvent, { type: "error" }>;
// 결과: { type: "error"; code: string; message: string }
 
// 특정 멤버 제외
type NonErrorEvent = Exclude<HttpEvent, { type: "error" }>;
// 결과: request | response | timeout 유니온

function handleError(event: Extract<HttpEvent, { type: "error" }>) {
  // event.code와 event.message가 확정되어 있음
  reportToSentry(event.code, event.message);
}
 
function logNormalEvent(event: Exclude<HttpEvent, { type: "error" }>) {
  // error 이벤트가 아닌 것만 받음
  analytics.track(event.type);
}

type EventType = HttpEvent["type"];
// 결과: "request" | "response" | "error" | "timeout"
 
// 이 타입으로 이벤트 타입별 핸들러 맵을 정의할 수 있음
type EventHandlers = {
  [K in EventType]: (event: Extract<HttpEvent, { type: K }>) => void;
};
 
const handlers: EventHandlers = {
  request: (e) => console.log(e.url),      // e: request 멤버
  response: (e) => console.log(e.status),   // e: response 멤버
  error: (e) => console.log(e.message),     // e: error 멤버
  timeout: (e) => console.log(e.duration),  // e: timeout 멤버
};

type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E };
 
function parseJSON<T>(raw: string): Result<T, SyntaxError> {
  try {
    return { ok: true, value: JSON.parse(raw) as T };
  } catch (e) {
    return { ok: false, error: e as SyntaxError };
  }
}
 
const result = parseJSON<UserProfile>('{"name": "홍길동"}');
 
if (result.ok) {
  // result.value: UserProfile
  console.log(result.value.name);
} else {
  // result.error: SyntaxError
  console.error(result.error.message);
}

type DomainEvent<K extends string, P = void> =
  P extends void
    ? { type: K; timestamp: number }
    : { type: K; payload: P; timestamp: number };
 
type AppEvent =
  | DomainEvent<"user:login", { userId: string; method: "email" | "oauth" }>
  | DomainEvent<"user:logout">
  | DomainEvent<"cart:add", { productId: string; quantity: number }>
  | DomainEvent<"cart:clear">;

type AuthState =
  | { isLoggedIn: true; user: UserProfile; token: string }
  | { isLoggedIn: false; loginUrl: string };
 
function Header({ auth }: { auth: AuthState }) {
  if (auth.isLoggedIn) {
    // auth.user: UserProfile, auth.token: string
    return <Avatar src={auth.user.avatar} />;
  }
 
  // auth.loginUrl: string
  return <a href={auth.loginUrl}>로그인</a>;
}