React with JavaScriptの使用からTypeScriptへの移行で、私が最も苦労したのは、フックを正しく入力し、それらを小道具として渡すことでした。
JavaScriptでこれほど単純なものを使用すると、TypeScriptでどのように多くの問題が発生するのでしょうか。
この記事で、私が彼らがどのように機能するかを理解する前に私が経験しなければならなかった頭痛をあなたに救いたいと思います！

まず最初に：

フックを作成するときは、準拠することが期待されるタイプを渡す必要があります。

const [title, setTitle] = useState<string>(“”);
const [amount, setAmount ] = useState<number>(0);
const [Selected, setSelected] = useState<boolean>(false);

まず、オブジェクトの外観を定義する型を作成する必要があります。人の情報を格納しようとしているとしましょう。

type Person = {
  name: string; 
  address: string;
  married: boolean;
}

const [person, setPerson] = useState<Person>({
name: “”,
address: “” ,
married: false
})

多数の人を収容するフックを作成したい場合はどうなりますか？
それは同じように簡単です：

const [people, setPeople] = useState<person[]>([])

フックを小道具として渡すのはどうですか？

TypeScriptの子コンポーネントが受け取ることを期待している小道具を入力すると、魔法はすべて起こります。これは、2人の親友であるReact.DispatchとReact.SetStateActionが登場するときです。

子コンポーネントでsetStateフックを呼び出すと、ReactはSetStateActionをディスパッチします。私たちの仕事は単純です。SetStateAction内の情報がどのように見えるかを定義するタイプを提供する必要があります。

type Props = {
  people: people[];
  setPeople: React.Dispatch<React.SetStateAction<people[]>>;
  title: string;
  setTitle: React.Dispatch<React.SetStateAction<string>>;
}

const ChildComponent: React.FC<Props> = ({people, setPeople, title, setTitle}) => { }