reactjs - react-hook-form v7 `watch` 输入 typescript ？

Question

我对如何将 watch 的类型声明为 Prop 感到困惑。这是一个例子:

// pages/FormContainer.tsx

import { useForm, useWatch } from "react-hook-form";
import FormView from "./FormView";

interface FormInputs {
  firstName: string;
  lastName: string;
  age: number;
}

const FormContainer = () => {
  const { control, register } = useForm<FormInputs>({
    defaultValues: {
      firstName: "Jon",
      lastName: "Doe",
      age: 24
    }
  });
  const formData = useWatch({ control });

  return <FormView register={register} formData={formData} />;
};

export default FormContainer;

// pages/FormView.tsx

import { UseFormReturn } from "react-hook-form";

interface Props {
  register: UseFormReturn["register"];
  formData: UseFormReturn["watch"];
}

const FormView = ({ formData }: Props) => {
  return (
    <div>
      <h1>
        My Name: {formData.firstName} {formData.lastName}
      </h1>
      <h2>I am {formData.age} years old</h2>
    </div>
  );
};

export default FormView;

问题是 typescript 在这个 formData={formData} prop 上向我显示错误

这里我提供了一个sandbox清楚我的意思

Answer 1

UseFormReturn["watch"]会给你返回 watch 的类型函数本身——即这个函数的类型:

  // `watch` here is of type `UseFormReturn["watch"]
  const { control, register, watch } = useForm<FormInputs>({
    // ...
  });

作为引用，这个watch的返回类型功能是 UnpackNestedValues<TFormValues> .

但是 - 您没有使用该功能，您使用的是 useWatch它返回一个略有不同的 UnpackNestedValue<DeepPartialSkipArrayKey<TFieldValues>> .因此，您可以将表单类型更改为:

import { UnpackNestedValue, UseFormReturn, DeepPartialSkipArrayKey } from "react-hook-form";
import { FormInputs } from "./FormContainer";

interface Props {
  register: UseFormReturn["register"];
  formData: UnpackNestedValue<DeepPartialSkipArrayKey<FormInputs>>
}

或者，由于您的表单对象(至少在本例中)非常“简单”(实际上只是键/值对)，您可以使用更简单的类型声明 Partial<FormInputs>在这种情况下，这在功能上是等效的。

Here's an updated example for you .