인프런 커뮤니티 질문&답변
작성한 질문수
21강. 강의와 다른부분에서 todo 타입 에러가 납니다.
작성
·
44
0
import type { Todo } from "@/types";
import { create } from "zustand";
import { combine } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
const initialState: {
todos: Todo[];
} = {
todos: [],
};
const useTodosStore = create(
immer(
combine(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);
});
},
},
})),
),
);export interface Todo {
id: number;
content: string;
}
오히려 강의에서 7분에 'never'에러나던 state.todos.push({ id: new Date().getTime(), content}); 이 코드 작성 시에는 에러가 나지않고,
state.todos.filter((todo) => todo.id !== targetId); 여기서 todo 부분에서 에러가 납니다.
'todo' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.
state.todos에 마우스오버해서 확인해보니 any 타입으로 뜹니다.
제가 중간에 설정하는 부분이나 놓친부분이 있는걸까요 ㅠㅠ?
답변 3
2
혹시... immer 라이브러리 패키지는 따로 설치하셨나요?
immer 관련 미들웨어를 설정하려면 따로 immer 라이브러리를 설치해야 합니다.
npm install immer0
안녕하세요 이정환입니다.
강의와 동일한 환경에서 코드를 작성하셨다면 아래 그림처럼 todos의 타입이 자동으로 잘 추론되어야 하는데 요상하네요 ..!
혹시 @/types 경로로부터 Todo 타입이 잘 불러와 졌는지 먼저 확인이 필요할 듯 합니다.
그럼에도 문제가 없는 상황이라면 전체 프로젝트의 코드를 확인해 봐야 할 것 같아요, 프로젝트 전체 코드를 Google Drive 혹은 GitHub를 통해 전달해 주시면 살펴보겠습니다.
답변 감사합니다!
위에 답글달아주신분 내용보고 Immer 설치하니 해결되었습니다!
import문 썼을때 에러가 안나서 설치 문제인지 모르고 코드만 들여다보고있었네요 ㅠㅠ
0
안녕하세요, 인프런 AI 인턴입니다.
정중한 사슴님께서 경험하고 있는 문제는 TypeScript에서 상태의 타입 추론이 올바르게 동작하지 않아 발생하는 것으로 보입니다. 특히, zustand와 함께 Typescript를 사용할 때 종종 상태 변수가 any 타입으로 추론되는 문제가 발생할 수 있습니다.
문제 원인
현재 zustand와 immer, combine을 함께 사용하면서 TypeScript가 정확하게 타입을 추론하지 못하는 문제가 발생한 것으로 보입니다. 이는 주로 타입 선언이 누락되거나, immer, combine에서의 타입 지정이 명확하지 않을 때 빈번하게 발생합니다.
해결 방법
- 초기 상태에 대한 명시적 타입 선언
이미 초기 상태인 initialState에 타입 선언을 했지만, combine을 사용하면서 타입 추론이 깨질 수 있습니다. 이 경우 함수 사용 시점에 타입을 명시적으로 선언해 주는 것이 도움이 됩니다.
- 타입 선언 수정
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의 상태 타입 문제 해결
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 감사합니다! Immer 설치하니 해결되었습니다 🙂
import 에러가 안나서 설치문제일줄 꿈에도 몰랐습니다.. ㅠ