Na transição do uso do React com JavaScript para o TypeScript, a coisa com a qual mais me esforcei foi digitar corretamente meus ganchos e passá-los como acessórios.
Como algo tão simples em JavaScript pode me causar tantos problemas no TypeScript ?!
Com este artigo, espero salvá-lo da dor de cabeça que tive que passar antes de descobrir como elas funcionavam!

Primeiras coisas primeiro:

Quando criamos um gancho, precisamos passar o tipo com o qual esperamos que esteja em conformidade:

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

Primeiro, precisamos criar um tipo definindo como nosso objeto deve ser. Digamos que estejamos tentando armazenar as informações de uma pessoa.

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

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

E se quisermos criar um gancho que abrigue uma série de pessoas?
Isso é tão direto:

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

Que tal passar ganchos como adereços?

A mágica acontece quando digitamos os adereços que nosso componente filho do TypeScript está esperando receber. É quando nossos dois melhores amigos, React.Dispatch e React.SetStateAction, entram em ação.

Quando chamamos um gancho setState em um componente filho, o React despacha um SetStateAction. Nosso trabalho é simples: precisamos fornecer o tipo que define a aparência das informações em 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}) => { }