Estoy migrando un proyecto de React with TypeScript para usar funciones de ganchos (React v16.7.0-alpha), pero no sé cómo establecer tipos de elementos desestructurados.
Aquí hay un ejemplo:
interface IUser { name: string; } ... const [user, setUser] = useState({name: 'Jon'}); Quiero forzar que la variable de user sea del tipo IUser . Mi única prueba exitosa es hacerlo en dos fases: escribir y luego inicializar:
let user: IUser; let setUser: any; [user, setUser] = useState({name: 'Jon'}); Pero estoy seguro de que hay una mejor manera. Además, setUser debe inicializarse como una función que toma un IUser como entrada y no devuelve nada.
Además, vale la pena señalar que usar const [user, setUser] = useState({name: 'Jon'}); sin ninguna inicialización funciona bien, pero me gustaría aprovechar TypeScript para forzar la verificación de tipos en init, especialmente si depende de algunos accesorios.
Gracias por tu ayuda.
Utilizar esta
const [user, setUser] = useState<IUser>({name: 'Jon'});Primero useState toma un genérico, que será su IUser. Si luego desea pasar el segundo elemento desestructurado que devuelve useState , deberá importar Dispatch. Considere esta versión extendida de su ejemplo que tiene un controlador de clics:
import React, { useState, Dispatch } from 'react'; interface IUser { name: string; } export const yourComponent = (setUser: Dispatch<IUser>) => { const [user, setUser] = useState<IUser>({name: 'Jon'}); const clickHander = (stateSetter: Dispatch<IUser>) => { stateSetter({name : 'Jane'}); } return ( <div> <button onClick={() => { clickHander(setUser) }}>Change Name</button> </div> ) }Ver esta respuesta .
También puede declarar el estado inicial antes y luego poder llamarlo en cualquier momento que desee:
type User = typeof initUser; const initUser = {name: 'Jon'} ... const [user, setUser] = useState<User>(initUser);Acerca de los prefijos de la interfaz I: https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface