인프런 커뮤니티 질문&답변

작성한 질문수

한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편

(7.5) 포스트 작성중 이탈 방지 기능 추가하기

56강 alertModalStore 구현 중 질문

작성

수정됨

store에서 actions를 생성하고 store를 내보내려고 할 때에

export const useAlertModal = () => {
  const store = useAlertModalStore();
  return store as typeof store & State;
};

이렇게 as 단언문을 추가하셨는데

저는 as typeof store & State 이 부분을 추가하지 않아도 똑같이 추론이 되고 있습니다.

const store: Write<State, {
    actions: {
        open: (params: Omit<OpenState, "isOpen">) => void;
        close: () => void;
    };
}>

둘 다 이렇게 동일하게 나오는데 어떤 차이점이 있는건가요?

답변 1

지식공유자

안녕하세요 이정환입니다.

~/src/store/alert-modal.ts 파일의 해당 단언을 지우신 다음,

~/src/components/modal/alert-modal.tsx 파일을 확인해보시면

아래 그림과 같이 store 내부의 State 프로퍼티들을 잘 추론하지 못하는 걸 확인하실 수 있습니다.

이렇게 되는 이유는 State 타입이 유니온(Discriminated Union)으로 정의되어 있어서, isOpen이 false일 때(CloseState)에는 title, description 등의 프로퍼티가 아예 존재하지 않기 때문입니다.

type State = CloseState | OpenState;

그런데 combine과 devtools 미들웨어를 거치면서 이 유니온 구조가 제대로 보존되지 않아, isOpen을 기준으로 한 타입 좁히기가 정상적으로 동작하지 않게 됩니다.

쉽게 말해 isOpen이 true라면 State에 title, description 등의 프로퍼티가 존재한다고 추론되어야 하는데 그렇지 못하고 있는 상황입니다.

따라서 as typeof store & State 단언문을 추가하여, 자동으로 추론된 Store 타입(typeof store)에 State 타입을 교집합으로 묶어준 것입니다.

작성한 질문수