【TypeScript】ModalTypeで考える判別可能なユニオン型 (discriminated union)📝

enum ModalType {
  CLONE,
  CLONE_CAUTION,
  NONE,
}
// type ModalType = "CLONE" | "CLONE_CAUTION" | "NONE" とほぼ同じ

export enum ModalEventType {
  EXHIBITION,
  WEBINAR,
  NORMAL,
}
// type ModalEventType = "EXHIBITION" | "WEBINAR" | "NORMAL" とほぼ同じ

type ModalState =
  | { type: ModalType.CLONE; eventType: ModalEventType }
  | { type: ModalType.CLONE_CAUTION }
  | { type: ModalType.NONE };

// ・・・省略・・・

// モーダル状態を判別可能なユニオン型で管理
  const [modalState, setModalState] = useState<ModalState>({
    type: ModalType.NONE,
  });

// ・・・省略・・・
        onClick: () =>
          setModalState({
            type: ModalType.CLONE,
            eventType: isExhibition
              ? ModalEventType.EXHIBITION
              : event.eventMode === EventMode.webinar
              ? ModalEventType.WEBINAR
              : ModalEventType.NORMAL,
          }),