Type générique en reactjs

Question

J'écris un hook personnalisé pour gérer les saisies dans mon application. J'utilise des types génériques pour définir quel type renvoyer pour mon hook personnalisé. Voici mon code

interface IUseInput {
    (): [T, (e: ChangeEvent) => void, U];
}

function useInput(): IUseInput {
    const [input, setInput] = useState({});
    const [isDirty, setDirty] = useState({});

    const handleInputChange = (e: ChangeEvent) => {
        setInput({
            ...input,
            [e.target.name]: e.target.value
        });
        setDirty({
            ...isDirty,
            [e.target.name]: true
        });
    };

    return [input, handleInputChange, isDirty] //cette ligne génère une erreur
}

const Component: React.FC = () => {
    const [input, handleChangeInput, isDirty] = useInput<{username: string, password: string}, {username: boolean, password: boolean}>();

  return (
      ....
  )

}

Mais je reçois cette erreur Type '{}[]' is not assignable to type 'IUseInput

Où est mon erreur? S'il vous plaît aidez-moi

Answer 1

IUseInput est le type de la fonction, pas le type du type de retour. Il n'y a aucun moyen de spécifier le type d'une déclaration de fonction, seulement le type d'une variable (à laquelle vous pourriez assigner une fonction). Cependant, ce n'est pas vraiment nécessaire, je déplacerais simplement le type de retour de IUseInput vers la déclaration de fonction.

Une amélioration qui pourrait être apportée, puisque U devrait avoir les mêmes clés que T, vous pouvez dériver U de T en utilisant le type mappé prédéfini Record. Ainsi, vous pouvez remplacer U par Record:

function useInput(): [T, (e: ChangeEvent) => void, Record] {
    const [input, setInput] = useState({} as T);
    const [isDirty, setDirty] = useState({} as Record);

    const handleInputChange = (e: ChangeEvent) => {
        setInput({
            ...input,
            [e.target.name]: e.target.value
        });
        setDirty({
            ...isDirty,
            [e.target.name]: true
        });
    };

    return [input, handleInputChange, isDirty] 
}

Lien de l'aire de jeu