[TS] 타입스크립트 + React Query 투두리스트 : 타입 에러 해결..

 

 

💡 타입 할당이 안된다는 error.. 해결..

 

<button
  className="delete-btn"
  onClick={() => deleteMutation.mutate(todo.id)}
>
  delete
</button>

 

왜 그런가 보니.. id 타입을 옵셔널로 주고 있어서였다.

 

    const newTodo = {
      title,
      content,
      isDone: false,
    };

 

json 서버를 쓰고 있어서

투두를 생성할 때 id 값을 안써도 되니까 요렇게 썼었는데..!

 

🫠 그래서 id: string; 으로 바꿔주고, newTodo 에 id 값도 넣어줬다!

 

npm install react-uuid

yarn add react-uuid

    const newTodo = {
      id: uuid(),
      title,
      content,
      isDone: false,
    };

 

 

🥲 메소드 타입 에러

TodoList.tsx

이제 남은 아이..

const ongoingTodos = todos.filter((todo: Todos) => todo.isDone === false);
  const finishTodos = todos.filter((todo: Todos) => todo.isDone === false);

  return (
    <div>
      <Form />
      <h2>📋</h2>
      <TodoList todos={ongoingTodos} isDone={false} />
      <TodoList todos={finishTodos} isDone={true} />
    </div>
  );

 

미리 걸러서 내려줄까 하고 TodoContainer.tsx 를 위처럼 바꾸고 TodoList 에선 filter 를 지웠더니

그냥 다음 메소드로 에러가 넘어올 뿐..

export type Todos = {
  map(arg0: (todo: Todos) => import("react/jsx-runtime").JSX.Element): import("react").ReactNode;
  id: string;
  content: string;
  title: string;
  isDone: boolean;
};

 

빠른 수정을 눌렀더니 Todos 타입에 map 속성이 추가됐다..?

에러는 사라졌지만.. 좀 더 알아보고 다시 돌아오겠다..

 

 

 

🔗 https://velog.io/@handaehee93/Type-Script-Error-%ED%98%95%EC%8B%9D%EC%97%90-%EC%86%8D%EC%84%B1%EC%9D%B4-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4

[ TypeScript Error ] '~' 형식에 '~' 속성이 없습니다.