Open11
React写経
ikura1写経リポジトリ
ikura1React Todo
ikura1React Todo
ikura1useStateを引数として渡すときの型宣言は、Dispatch<SetStateAction<String>>である。
引数として渡す場合は、関数でラップした方がスマートなのでそちらで考える。
import { Dispatch, SetStateAction } from "react";
function FilterButton({setFilter: Dispatch<SetStateAction<String>>}) {
}
React Todo
ikura1ObjectのKeyを一律Enumで列挙したい場合の書き方
type Filter = "ALL" | "Active" | "Completed"
const FILTER_MAP: { [key in Filter]: (task: TodoProps) => boolean } = {
ALL: () => true,
Active: (task: TodoProps) => !task.completed,
Completed: (task: TodoProps) => task.completed,
};
Object.keysは型が外れてしまうので、Type Assertionする。他に良い方法を探し中
const FILTER_NAMES = Object.keys(FILTER_MAP) as Filter[];
ikura1-
useRefには型を与える -
undefinedになるので、?で対応させておく
const hogeFieldRef= useRef<HTMLInputElement>(null);
hogeFieldRef.current?.focus()