Establecer tipos en useState React Hook con TypeScript

Estoy migrando un proyecto de React con TypeScript para usar funciones de hooks (React v16.7.0-alpha), pero no puedo averiguar cómo configurar los tipos de los elementos desestructurados.

Aquí hay un ejemplo:

interface IUser {
  name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});

Quiero forzar que la uservariable sea de tipo IUser. Mi única prueba exitosa es hacerlo en dos fases: escribiendo, luego inicializando:

let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});

Pero estoy seguro de que hay una forma mejor. Además, setUserdebe inicializarse como una función que toma IUsercomo 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 este

const [user, setUser] = useState<IUser>({name: 'Jon'});

Consulte el tipo correspondiente aquí: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a1b68be3a64e5d2aa1070f68cc935d668a976ad/types/react/index.d.ts#L844

Primero useStatetoma un genérico, que será tu 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>
    ) 
}

Vea 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

https://fettblog.eu/typescript-react/hooks/

// import useState next to FunctionComponent
    import React, { FunctionComponent, useState } from 'react';
    
    // our components props accept a number for the initial value
    const Counter:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
      // since we pass a number here, clicks is going to be a number.
      // setClicks is a function that accepts either a number or a function returning
      // a number
      const [clicks, setClicks] = useState(initial);
      return <>
        <p>Clicks: {clicks}</p>
        <button onClick={() => setClicks(clicks+1)}>+</button>
        <button onClick={() => setClicks(clicks-1)}>-</button>
      </>
    }