Dalam transisi dari menggunakan Bereaksi dengan JavaScript ke TypeScript, hal yang paling saya perjuangkan adalah mengetikkan kait saya dengan benar dan meneruskannya sebagai alat peraga.
Bagaimana bisa sesuatu yang begitu sederhana dalam JavaScript memberi saya begitu banyak masalah di TypeScript?!
Dengan artikel ini saya berharap dapat menyelamatkan Anda dari sakit kepala yang harus saya alami sebelum saya mengetahui cara kerjanya!

Hal pertama yang pertama:

Saat kita membuat sebuah hook, kita harus memasukkan tipe yang kita harapkan untuk menyesuaikannya:

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

Pertama, kita perlu membuat tipe yang mendefinisikan bagaimana objek kita seharusnya terlihat. Katakanlah kita mencoba menyimpan informasi seseorang.

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

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

Bagaimana jika kita ingin membuat pengait yang menampung banyak orang?
Itu sama mudahnya:

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

Bagaimana dengan melewatkan kait sebagai alat peraga?

Semua keajaiban terjadi ketika kita mengetikkan properti yang diharapkan diterima oleh komponen anak TypeScript kita. Ini adalah saat dua sahabat kita React.Dispatch dan React.SetStateAction ikut bermain.

Saat kita memanggil hook setState di komponen turunan, React mengirimkan SetStateAction. Tugas kita sederhana: Kita perlu menyediakan tipe yang mendefinisikan bagaimana informasi di dalam SetStateAction terlihat.

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}) => { }