En la transición de usar React con JavaScript a TypeScript, lo que más me costó fue escribir correctamente mis ganchos y pasarlos como accesorios.
¿Cómo es posible que algo tan simple en JavaScript me dé tantos problemas en TypeScript?
¡Con este artículo espero evitarles el dolor de cabeza que tuve que pasar antes de descubrir cómo funcionaban!

Lo primero es lo primero:

Cuando creamos un gancho, necesitamos pasar el tipo al que esperamos que se ajuste:

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

Primero, necesitamos crear un tipo que defina cómo debería verse nuestro objeto. Digamos que estamos tratando de albergar la información de una persona.

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

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

¿Qué pasa si queremos crear un gancho que albergue a una gran variedad de personas?
Eso es igual de sencillo:

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

¿Qué hay de pasar ganchos como accesorios?

La magia ocurre cuando escribimos los accesorios que nuestro componente secundario de TypeScript espera recibir. Aquí es cuando nuestros dos mejores amigos React.Dispatch y React.SetStateAction entran en juego.

Cuando llamamos a un gancho setState en un componente hijo, React envía un SetStateAction. Nuestro trabajo es simple: necesitamos proporcionar el tipo que defina cómo se ve la información dentro de 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}) => { }