Beim Übergang von der Verwendung von React mit JavaScript zu TypeScript hatte ich am meisten Probleme damit, meine Hooks richtig einzugeben und sie als Requisiten weiterzugeben.
Wie konnte etwas so Einfaches in JavaScript mir in TypeScript so viel Ärger bereiten?!
Mit diesem Artikel hoffe ich, Ihnen die Kopfschmerzen zu ersparen, die ich durchmachen musste, bevor ich herausgefunden habe, wie sie funktionieren!

Das wichtigste zuerst:

Wenn wir einen Hook erstellen, müssen wir den Typ übergeben, den wir erwarten, dass er entspricht:

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

Zuerst müssen wir einen Typ erstellen, der definiert, wie unser Objekt aussehen soll. Nehmen wir an, wir versuchen, die Informationen einer Person zu speichern.

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

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

Was ist, wenn wir einen Hook erstellen möchten, der eine Reihe von Menschen beherbergt?
Das ist genauso einfach:

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

Wie wäre es mit Haken als Requisiten?

Die Magie geschieht, wenn wir die Requisiten eingeben, die unsere untergeordnete TypeScript-Komponente erwartet. Hier kommen unsere beiden besten Freunde React.Dispatch und React.SetStateAction ins Spiel.

Wenn wir einen setState-Hook in einer untergeordneten Komponente aufrufen, sendet React eine SetStateAction. Unsere Aufgabe ist einfach: Wir müssen den Typ bereitstellen, der definiert, wie die Informationen in der SetStateAction aussehen.

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