javascript - Parametrul 'data' are implicit un tip 'any'.ts(7006) React hooks

Pur și simplu nu înțeleg cum „data” este subliniat cu eroarea 7006, dar în mediul de testare chiar pe prima pagină (https://react-hook-form.com/get-started#Quickstart) a React Hooks, funcționează.

Îmi lipsește o dependență sau trebuie să am un alt fișier sau să import ceva?

Am această problemă și într-o altă zonă.

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./styles.css";

function App() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => {
    console.log(data);
  }; // your form submit function which will invoke after successful validation

  console.log(watch("example")); // you can watch individual input by pass the name of the input

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Example</label>
      <input name="example" defaultValue="test" ref={register} />
      <label>ExampleRequired</label>
      <input
        name="exampleRequired"
        ref={register({ required: true, maxLength: 10 })}
      />
      {errors.exampleRequired && <p>This field is required</p>}
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

export default App;

Răspuns #1

Deși codul funcționează, TS te avertizează că nu poate deduce tipul lui data din codul tău și recurge la any implicit din această cauză. Trebuie să setezi manual tipul lui data sau să setezi un tip undeva de unde TS poate deduce tipul lui data.

În acest caz, trebuie să transmiteți definiția datelor formularului dumneavoastră atunci când apelați useForm() (vedeți documentația). De asemenea, va trebui să înfășurați onSubmit cu handleSubmit. Exemplu funcțional - sandbox.

type FormData = {
  example: string;
  exampleRequired: string;
};


function App() {    
  const { register, handleSubmit, watch, errors } = useForm<FormData>();
  const onSubmit = handleSubmit(data => {
    console.log(data);
  }); 

Și folosește onSubmit:

<form onSubmit={onSubmit}>

Răspunsul #2

Aceasta este o eroare TypeScript, nu o eroare de rulare. Spune că ai definit o funcție (onSubmit) al cărei parametru (data) nu specifică un tip.

Combinând exemplele TypeScript de aici și aici, ar trebui să faci asta:

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
// -------------^^^^^^^^^^^^^^^
import ReactDOM from "react-dom";

import "./styles.css";

type Inputs = {
  example: string,
  exampleRequired: string,
};

function App() {
  const { register, handleSubmit, watch, errors } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = data => {
  // -----------^^^^^^^^^^^^^^^^^^^^^^^
    console.log(data);
  };

  ...