Работа с элементами формы в typescript

Question

Только начал разбираться в том как работать в связке react + typescript и уже назрел один вопрос) Существует компонент Login в котором есть форма авторизации. На событие onSubmit я хочу выбрать из этой формы поля email и password при помощи этого выражения event.target.elements. Но typescript ругается и выдает такую ошибку Property 'elements' does not exist on type 'EventTarget'. Подскажите пожалуйста как мне можно исправить эту ошибку, стоит просто написать вместо (event: React.FormEvent) это (event: any) или есть другой способ?

interface LoginProps {
 history?: {}
}
const Login: React.FC<LoginProps> = ({ history }) => {
  const [loading, setLoading] = useState<Boolean>(false);

  const handleLogin = useCallback(async (event: React.FormEvent) => {
    event.preventDefault();

    const { email, password } = event.target.elements;

  }, [history]);

  return (
    <>
        <div className="auth">
      <form className="auth_form" onSubmit={handleLogin}>
        <div className="auth_in">
          <h5 className="title offset_mod">Log In</h5>
          <div className="auth_body">
            <div className="auth_w_input">
              <input
                type="text"
                className="input"
                name="email"
                placeholder="Email"
                aria-label="email"
                aria-describedby="addon-wrapping"
              />
            </div>
            <div className="auth_w_input">
              <input
                type="password"
                name="password"
                className="input"
                placeholder="Password"
                aria-label="password"
                aria-describedby="addon-wrapping"
              />
            </div>
          </div>
          <div className="auth_footer">
            <button type="submit" className="btn primary_state btn_auth">Log In</button>
          </div>
        </div>
      </form>
    </div>

    </>

Answer 1

TS и типы

T1: {
    const isForm = (q: any): q is HTMLFormElement => q instanceof HTMLFormElement
    const foo = (e: Event) => {
        if (isForm(e.target)) {
            const { } = e.target.elements;
        }
    }
}

T2: {
    interface $elements {
        email: HTMLInputElement;
        password: HTMLInputElement;
    }
    const foo = (e: Event) => {
        if (e.target) {
            const form = e.target as HTMLFormElement
            const { email, password }: $elements = form.elements as any;
        }
    }
}

React

работу с формами в реакте оставлю за рамками ответа

БЛОГ НА HUSL

Работа с элементами формы в typescript

Ответы (1 шт):

TS и типы

React