web-dev-qa-db-fra.com

Définissez les types sur useState React Hook avec TypeScript

Je migre un React avec le projet TypeScript pour utiliser les fonctions de raccordement (React v16.7.0-alpha), mais je ne peux pas comprendre comment définir les typages des éléments déstructurés.

Voici un exemple:

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

Je veux forcer la variable user à être de type IUser. Mon seul essai réussi est de le faire en deux phases: Taper puis initialiser:

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

Mais je suis sûr qu'il existe un meilleur moyen. De plus, setUser devrait être initialisé en tant que fonction qui prend un IUser en entrée et ne renvoie rien.

Il convient également de noter que l’utilisation de const [user, setUser] = useState({name: 'Jon'}); sans initialisation fonctionne correctement, mais j’aimerais tirer parti de TypeScript pour forcer la vérification de type sur init, en particulier si elle dépend de certains accessoires.

Merci de votre aide.

reactjstypescriptreact-hooks
19
htaidirt

Utilisez ceci

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

Voir le type correspondant ici: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a1b68be3a64e5d2aa1070f935d668a976ad/types/react/index.d.ts#L844

39
Nurbol Alpysbayev

Tout d'abord, useState prend un générique, qui sera votre IUser. Si vous voulez ensuite contourner le second retour d'élément déstructuré par useState, vous devrez importer Dispatch. Considérez cette version étendue de votre exemple qui a un gestionnaire de clic:

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

Voir ceci réponse .

0
cham