TypeScriptのcomponentsの書き方
JavaScriptでは型定義がない。
このため、通常はJSDocコメントを使用して型情報を提供するか、動的型付けのまま進行
今回は動的型付けのまま進行
export const IncompleteTodos = () => {
const [todos, onClickComplete, onCLickDelete] = props
type キーワードを使ってプロパティの型を定義
type IncompleteTodosProps = {
todos: string[];
onClickComplete: (index: number) => void;
onClickDelete: (index: number) => void;
};
型注釈がないため、動的型付けのまま進行
export const IncompleteTodos = (props) => {
IncompleteTodosコンポーネントがIncompleteTodosProps型のプロパティを受け取るのを指定
React.FC<IncompleteTodosProps>は、IncompleteTodosProps型を持つReact関数コンポーネントを定義