javascript - 参数 'data' 隐式具有 'any' 类型.ts(7006) React 钩子

我真的完全不明白为什么“data”会出现 7006 错误的下划线，但在测试环境中，在 React Hooks 的主页（https://react-hook-form.com/get-started#Quickstart）上，它却能正常工作。

我是不是缺少某个依赖，或者需要另一个文件或导入某些东西？

我在另一个区域也有这个问题。

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;

答案＃1

虽然代码可以运行，但 TS 会警告你无法从你的代码中推断出 data 的类型，因此它会回退到隐式的 any。你需要手动设置 data 的类型，或者在某处设置一个类型，使 TS 可以从中推断出 data 的类型。

在这种情况下，您需要在调用 useForm() 时传入表单数据的定义（参见文档）。您还需要用 handleSubmit 包裹 onSubmit。示例 - 沙箱。

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


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

并使用 onSubmit:

<form onSubmit={onSubmit}>

答案＃2

那是一个 TypeScript 错误，不是运行时错误。它的意思是你定义了一个函数（onSubmit），其参数（data）没有指定类型。

结合这里和这里的 TypeScript 示例，你应该这样做：

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

  ...