Ustaw typy dla hooka useState React z TypeScript

Migruję projekt React z TypeScript, aby korzystać z funkcji hooków (React v16.7.0-alpha), ale nie mogę dowiedzieć się, jak ustawić typizację zniszczonych elementów.

Oto przykład:

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

Chcę, aby userzmienna była typu IUser. Moja jedyna zakończona sukcesem wersja próbna obejmuje dwie fazy: wpisywanie, a następnie inicjowanie:

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

Ale jestem pewien, że jest lepszy sposób. Ponadto, setUserpowinny być inicjowane jako funkcję, która pobiera IUserjako dane wejściowe i zwraca niczego.

Warto również zauważyć, że używanie const [user, setUser] = useState({name: 'Jon'});bez inicjalizacji działa dobrze, ale chciałbym skorzystać z TypeScript, aby wymusić sprawdzanie typów w init, zwłaszcza jeśli zależy to od niektórych właściwości.

Dzięki za pomoc.

Użyj tego

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

Zobacz odpowiedni typ tutaj: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a1b68be3a64e5d2aa1070f68cc935d668a976ad/types/react/index.d.ts#L844

Najpierw useStatepobiera ogólny, który będzie Twoim IUser. Jeśli chcesz następnie ominąć drugi zniszczony element, który jest zwracany useState, musisz zaimportować Dispatch. Rozważ tę rozszerzoną wersję Twojego przykładu, która ma moduł obsługi kliknięć:

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>
    ) 
}

Zobacz tę odpowiedź .

Możesz również zadeklarować stan początkowy przed, a następnie móc go wywołać w dowolnym momencie:

type User = typeof initUser;
const initUser = {name: 'Jon'}
...
const [user, setUser] = useState<User>(initUser);

Informacje o prefiksach interfejsu 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>
      </>
    }