TypeScript y React se llevan muy bien. Acá te voy a mostrar algunos tips para poder usar ambos con seguridad.
Supongamos que tengo el siguiente estado
const [count, setCount]=useState(0)
Y de repente lo queremos actualizar de esta forma
setCount("Aguante River y TypeScript")
La inferencia de TypeScript nos dará une error a la hora de compilar, diciendo que se espera un valor de tipo Number, que es el que le dimos en el inicio. Para poder indicar que tipo de dato va a tener el estado podemos decirselo entre <>
const [count, setCount]=useState<number>(0)
La ventaja de TypeScript es que, cuando nuestro estado es un objeto, el autocomplete nos ayuda para saber que propiedades tiene ese objeto. Supongamos que nuestro estado va a contener un array de un tipo generico (los tipos genericos son los que se declaran con <>). La sintaxis seria la siguiente
const [jugadores, setJugadores]=useState<Array<Jugador>>([])
Otra forma de poder hacerlo es asi
const [subs, setSubs]=useState<Sub[]>([])
ATENTI
Hay un tip para poder utilizar interfaces en los estados que puede ser muy util para cuando el componente tiene varios estados. Podemos definir estos estados como una interfaz y despues llamarlos con useState cuando querramos utilizarlos. Imaginemos que nuestra app tiene los estados jugadores y equipos, los mismos estan conformados por elementos del tipo Jugador y Equipo. Primero defino la interfaz
interface ComponentState{
jugadores:Sub[],
equipos: Equipo[]
}
Una vez que hicimos la interfaz ya podemos llamar a esta en nuestros useState
const [jugadores, setJugadores]=useState<ComponentState[jugadores]>([])
¿Por que hacer esto, si parece mas código? Porque lo hace mas entendible y mas escalable a tu código.
Los componentes de React reciben propiedades, y estas propiedades por defecto son del tipo any. Como vimos en el capitulo de any, esto está mal y no se recomienda. Hay una forma recomendada de tipar propiedades que es justamente creando la interfaz de propiedades. Supongamos que nuestra propiedad va a recibir un array de jugadores para mostrarlos con un map.