TypeScript Discriminated Union(구별된 유니온) 패턴 적용하기

토스트 모달을 띄우는 zustand 스토어에서 다음과 같이 타입 안전성을 보장할 수 있음을 알게 되었다.

type OpenState = {
  isOpen: true;  // 리터럴 타입
  title: string;
  description: string;
};

type CloseState = {
  isOpen: false;  // 리터럴 타입
};

type State = CloseState | OpenState; // 유니온 타입 사용

// ex: isOpen이 true이면 자동으로 OpenState로 좁혀짐
if (state.isOpen) {
  state.title; // TypeScript가 자동으로 OpenState로 좁혀서 title이 존재함을 보장
  state.description; // 마찬가지로 안전하게 접근 가능
}

 type 유니온을 사용할 때, true/false 리터럴을 사용하는 이유는 타입 안전성과 타입 가드 때문.

• sOpen: true -> TypeScript가 OpenState로 좁혀서 title, description 접근을 허용
• isOpen: false -> TypeScript가 CloseState로 좁혀서 title, description 접근을 차단
• isOpen: boolean -> 타입이 좁혀지지 않아서 title, description 접근이 불안전

이 패턴은 상태에 따라 다른 속성 집합을 가질 때 타입 안전성을 보장함.