参数 'data' 隐含一个 'any' type.ts(7006) React hooks答案

【问题标题】：Parameter 'data' implicitly has an 'any' type.ts(7006) React hooks参数 'data' 隐含一个 'any' type.ts(7006) React hooks
【发布时间】：2021-02-22 06:52:12
【问题描述】：

我只是不明白“数据”是如何用 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;

【问题讨论】：

到底是什么问题？

标签： javascript reactjs typescript react-hooks

【解决方案1】：

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

在这种情况下，您需要在调用useForm() 时传递表单数据的定义（参见documentation）。您还需要用handleSubmit 包装onSubmit。工作示例 - sandbox。

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

【讨论】：

阅读我添加的文档链接。您还需要将 onSubmit 与 handleSubmit 包装起来，以便在这种情况下进行类型推断。
我知道，但您在编辑之前没有在答案中说明这一点。他们在代码中使用它的方式，TypeScript 无法推断 data 的类型，因为它没有被包裹在 onSubmit 的定义中，当它被传递给他们 JSX 中的 onSubmit 属性时，它被包裹得更远。
是的。我认为您会看到编辑（毕竟您阅读了原始答案），所以我没有费心说明它。第一次查看文档中的示例时，我错过了onSubmit。这并没有改变这样一个事实，即声明表单的基本形状（并正确使用库）将使用推理解决所有问题。
我不认为对于不熟悉 TypeScript 的人来说，为什么将函数包装在一个地方会导致错误，但将其包装在另一个地方不会，即使两者看起来在功能上是等效的。这就是为什么我建议在您的答案中添加该行。不过，在您编辑后，我确实投了赞成票。很抱歉让您觉得自己是个学究。

【解决方案2】：

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

结合 here 和 here 的 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);
  };

  ...

【讨论】：