Inflearn Community Q&A

asked

Bite-Sized React.js Practical Project - SNS Edition

(7.5) Adding a feature to prevent leaving while writing a post.

56강 alertModalStore 구현 중 질문

Resolved

Written on

Edited

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;
    };
}>

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

reacttypescriptreact-querysupabasezustand

Answer 1

Instructor

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

~/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 타입을 교집합으로 묶어준 것입니다.

Questioner

아하 ! 이해했습니다

그렇다면 제가 확인한 것처럼 바로 알 수 없는 경우 구현을 하다 원하는 타입이 추론되지 않을경우 as 단언문을 추가하는 방식으로 하면 되는걸까요??

Instructor

네 보통은 그렇게 작업하게됩니다. 다만 as 단언을 너무 자주 사용할 경우 타입 안정성에 문제가 발생할 수 있기에! 가급적 타입 추론을 더 잘 되도록 코드를 먼저 수정해 보시는게 좋습니다. 강의에서는 라이브러리의 한계 때문에 단언을 사용하였습니다 ㅠㅠ

asked