작성한 질문수 2

2

혹시... immer 라이브러리 패키지는 따로 설치하셨나요?

immer 관련 미들웨어를 설정하려면 따로 immer 라이브러리를 설치해야 합니다.

npm install immer

0

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

강의와 동일한 환경에서 코드를 작성하셨다면 아래 그림처럼 todos의 타입이 자동으로 잘 추론되어야 하는데 요상하네요 ..!

혹시 @/types 경로로부터 Todo 타입이 잘 불러와 졌는지 먼저 확인이 필요할 듯 합니다.

그럼에도 문제가 없는 상황이라면 전체 프로젝트의 코드를 확인해 봐야 할 것 같아요, 프로젝트 전체 코드를 Google Drive 혹은 GitHub를 통해 전달해 주시면 살펴보겠습니다.

0

안녕하세요, 인프런 AI 인턴입니다.

정중한 사슴님께서 경험하고 있는 문제는 TypeScript에서 상태의 타입 추론이 올바르게 동작하지 않아 발생하는 것으로 보입니다. 특히, zustand와 함께 Typescript를 사용할 때 종종 상태 변수가 any 타입으로 추론되는 문제가 발생할 수 있습니다.

문제 원인

현재 zustand와 immer, combine을 함께 사용하면서 TypeScript가 정확하게 타입을 추론하지 못하는 문제가 발생한 것으로 보입니다. 이는 주로 타입 선언이 누락되거나, immer, combine에서의 타입 지정이 명확하지 않을 때 빈번하게 발생합니다.

해결 방법

1. 초기 상태에 대한 명시적 타입 선언
   

이미 초기 상태인 initialState에 타입 선언을 했지만, combine을 사용하면서 타입 추론이 깨질 수 있습니다. 이 경우 함수 사용 시점에 타입을 명시적으로 선언해 주는 것이 도움이 됩니다.

2. 타입 선언 수정
   

combine을 사용할 때 타입을 명시적으로 지정해 주는 것만으로 해결될 수 있습니다.

   const useTodosStore = create(
     immer(
       combine<typeof initialState, any>(initialState, (set) => ({
         actions: {
           createTodo: (content: string) => {
             set((state) => {
               state.todos.push({ id: new Date().getTime(), content });
             });
           },
           deleteTodo: (targetId: number) => {
             set((state) => {
               state.todos = state.todos.filter((todo) => todo.id !== targetId);
             });
           },
         },
       })),
     ),
   );

위 수정 사항에서 <typeof initialState, any> 와 같이 제네릭을 사용하여 combine 함수에 타입 정보를 제공합니다. 이는 타입스크립트 컴파일러가 combine 내 상태를 정확히 추론할 수 있도록 도와줄 것입니다.

추가적인 확인

• zustand의 최신 버전 및 관련 관련 종속성의 업데이트 여부를 확인하세요. 최신 버전은 기존 버전에서 발생하는 타입 문제를 해결할 수 있습니다.
  
• 프로젝트 루트의 tsconfig.json 파일에서 strict 모드가 활성화되어 있는지도 확인하십시오. 이 설정이 가능하다면, 타입 검사가 더 엄격하게 동작하여 무시된 타입 오류를 잡아낼 수 있습니다.
  

관련해서 비슷한 이슈를 겪은 다른 학습자의 질문이 있었던 링크를 함께 공유드립니다:
- Zustand와 사용 시 TypeScript의 상태 타입 문제 해결

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.