TypeScriptのpropsで受け取った時の型定義がわからない
Q&A
Closed
解決したいこと
親コンポーネント(TodoList.tsx)から受け取ったpropsを子コンポーネント(TodoITem.tsx)で受け取った時に、エラーが出るので型指定したいがany以外だと何なのか助言を頂きたいです。
発生している問題・エラー
プロパティ 'todo' は型 '{}' に存在しません。
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
TodoList.tsx
import React, { useState } from 'react';
import { useRecoilValue } from 'recoil';
import { todoListState } from '../State/atom';
import { DATA } from '../types/DataType';
import TodoItem from './TodoItem';
import TodoItemCreator from './TodoItemCreator';
import TodoListStatus from './TodoListStatus';
const TodoList = () => {
const todoList = useRecoilValue(todoListState);
return (
<div>
<h1>初めてのRecoil</h1>
<TodoListStatus />
<TodoItemCreator />
{todoList.map((todo) => (
<TodoItem key={todo.id} todo={todo} />
))}
</div>
);
};
export default TodoList;
TodoItem.tsx
import React from 'react';
//<{todo:any}>を外すとpropsで受け取ったtodoで上記のエラーメッセージがはかれる
const TodoItem: React.FC<{ todo: any }> = ({ todo }) => {
return (
<div>
<ul key={todo.id}></ul>
<div key={todo.id}>{todo.title}</div>
</div>
);
};
export default TodoItem;
atom.ts
//atom(store)
import { atom } from 'recoil';
import { DATA } from '../types/DataType';
export const todoListState = atom<Array<DATA>>({
key: 'todoListState',
default: [
{
id: 0,
title: '送信設定',
isComplete: false,
},
],
});
selector.ts
//selector
import { selector } from 'recoil';
import { todoListState } from './atom';
export const todoListStatusState = selector<number>({
key: 'todoListStatusState',
get: ({ get }) => {
const todoList = get(todoListState);
const totalNum = todoList.length;
return totalNum;
},
});
DataType.ts
//型を指定
export type DATA = {
id: number;
title: string;
isComplete: boolean;
};
自分で試したこと
下記コンポーネントにReact.FCに受け取ったpropsにanyを定義することでエラーは解除される。しかし、anyは避けたいので具体的な型定義を施したい。
TodoItem.tsx
const TodoItem: React.FC<{ todo: any }> = ({ todo }) => {
return (
<div>
<ul key={todo.id}></ul>
<div key={todo.id}>{todo.title}</div>
</div>
);
};
使用技術
package.json
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.6",
"typescript": "^4.8.4",
0
