Nel passaggio dall'utilizzo di React con JavaScript a TypeScript, la cosa con cui ho avuto più difficoltà è stata digitare correttamente i miei hook e passarli come oggetti di scena.
Come potrebbe qualcosa di così semplice in JavaScript darmi così tanti problemi in TypeScript?!
Con questo articolo spero di risparmiarti il ​​mal di testa che ho dovuto affrontare prima di capire come funzionavano!

Cominciando dall'inizio:

Quando creiamo un hook, dobbiamo passare il tipo a cui ci aspettiamo che sia conforme a:

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

Per prima cosa, dobbiamo creare un tipo che definisca come dovrebbe apparire il nostro oggetto. Diciamo che stiamo cercando di ospitare le informazioni di una persona.

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

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

E se volessimo creare un gancio che ospita una serie di persone?
È altrettanto semplice:

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

Che ne dici di passare i ganci come oggetti di scena?

La magia avviene quando digitiamo gli oggetti di scena che il nostro componente figlio TypeScript si aspetta di ricevere. È qui che entrano in gioco i nostri due migliori amici React.Dispatch e React.SetStateAction.

Quando chiamiamo un hook setState in un componente figlio, React invia un SetStateAction. Il nostro compito è semplice: dobbiamo fornire il tipo che definisce l'aspetto delle informazioni all'interno di 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}) => { }