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
0
안녕하세요 이정환입니다.
~/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 타입을 교집합으로 묶어준 것입니다.
0
아하 ! 이해했습니다
그렇다면 제가 확인한 것처럼 바로 알 수 없는 경우 구현을 하다 원하는 타입이 추론되지 않을경우 as 단언문을 추가하는 방식으로 하면 되는걸까요??
1
네 보통은 그렇게 작업하게됩니다. 다만 as 단언을 너무 자주 사용할 경우 타입 안정성에 문제가 발생할 수 있기에! 가급적 타입 추론을 더 잘 되도록 코드를 먼저 수정해 보시는게 좋습니다. 강의에서는 라이브러리의 한계 때문에 단언을 사용하였습니다 ㅠㅠ
회원가입 구현 (구현 후 최종 화면 출력 X)
0
39
2
(6.11) 회원가입시 프로필 정보 자동 생성하기 Q. 호출 순서 문의
0
36
1
명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이
0
37
2
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
48
2
6.8 zustand 세션 질문입니다.
0
92
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
79
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
1
317
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
75
2
4.11 바로 투두 삭제가 안됨 질문
0
85
3
매개변수 updatedTodo 관련 질문
0
66
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
78
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
69
2
4.6 id를 string으로 변경시 오류
0
64
2
리액트 타입스크립트 관련 질문있습니다.
0
62
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
97
2
ui 파일 질문드립니다.
0
76
1
tanstack query devtools에서 질문있습니다!
0
66
2
댓글 삭제 시 isPending 질문
0
64
2
두번째 예외상황에 대해 질문있습니다!
0
65
1
리액트 쿼리 질문입니다
1
72
2
개발자도구에서 components 가 안보입니다.
0
94
3
state 관리에 대한 정리
0
79
3
[(2.4) Shadcn/ui를 소개합니다] 강의 Shadcn 세팅 관련 질문 있습니다.
0
176
3
like 테이블에서 왜 create_at이 필요한지 궁금합니다.
0
78
1