Lors de la transition de l'utilisation de React avec JavaScript à TypeScript, la chose avec laquelle j'ai le plus lutté était de taper correctement mes crochets et de les transmettre en tant qu'accessoires.
Comment quelque chose d'aussi simple en JavaScript peut-il me poser autant de problèmes en TypeScript ?!
Avec cet article, j'espère vous éviter le mal de tête que j'ai dû traverser avant de comprendre comment ils fonctionnaient !

Tout d'abord:

Lorsque nous créons un hook, nous devons transmettre le type auquel nous nous attendons à ce qu'il se conforme :

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

Tout d'abord, nous devons créer un type définissant à quoi doit ressembler notre objet. Disons que nous essayons d'héberger les informations d'une personne.

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

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

Et si nous voulions créer un crochet qui abrite un éventail de personnes ?
C'est tout aussi simple :

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

Qu'en est-il de la transmission des crochets en tant qu'accessoires ?

La magie se produit lorsque nous tapons les accessoires que notre composant enfant TypeScript s'attend à recevoir. C'est alors que nos deux meilleurs amis React.Dispatch et React.SetStateAction entrent en jeu.

Lorsque nous appelons un hook setState dans un composant enfant, React distribue un SetStateAction. Notre travail est simple : nous devons fournir le type qui définit l'apparence des informations dans 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}) => { }