Неправильный тип возврата с пользовательским хуком от useState

Question

У меня есть следующий обобщенный c пользовательский хук, сделанный с помощью машинописи:

import { useState } from "react"

export const useForm = <T>(initialValues: T) => {
    const[values, setValues] = useState<T>(initialValues)
    return [
        values,
        (        
        e: { target: HTMLInputElement}) => {
            setValues({
                ...values,
                [e.target.name]: e.target.value
            })
        }
    ]
}

Тогда я пытаюсь его использовать:

import React from 'react';
import { useForm } from './useForm';

type FormValues = {
  email: string,
  password: string
}

const App : React.FC = () => {
  const initialValues: FormValues = {email: "", password: ""}
  const [values, handleChanges] = useForm<FormValues>(initialValues);

  return (
    <div>
      <input type="text" name="email" value={(values.email} onChange={e => handleChanges}/>
      <input 
        type="password"
        name="password"
        value={values.password}
        onChange={e => handleChanges}/>
    </div>
  )
}

Моя проблема около

values.email

и

values.password

Сообщение об ошибке:

Свойство 'email' не существует для типа 'FormValues ​​| ((e: {target: HTMLInputElement;}) => void) '. Свойство 'email' не существует для типа '(e: {target: HTMLInputElement;})

Свойство' password 'не существует для типа' FormValues ​​| ((e: {target: HTMLInputElement;}) => void) '. Свойство 'пароль' не существует для типа '(e: {target: HTMLInputElement;})

Если значения являются единственными числами между FormValues ​​и другим значением, я не могу получить доступ к электронная почта и пароль от него?

Answer 1

Проблема в моем типе возврата. Кажется, я должен явно указать это в подписи кода.

import { useState } from "react"
import { ChangeEvent } from "react"

function useForm<T>(
    initialState: T,
  ): [T, (e: ChangeEvent<HTMLInputElement>) => void] {
    const [values, setValues] = useState<T>(initialState);

    function handleChange(e: ChangeEvent<HTMLInputElement>): void {
      setValues({
        ...values,
        [e.target.name]: e.target.value,
      });
    }

    return [values, handleChange];
  }

  export default useForm;