react-hook-form: [Bug]: TypeScript errors type incorrect if value is an Object

@uncvrd @congqiao My solution for this was just to manually cast the types in the onSubmit handler. This lets me use the latest version, even though it’d be nice if I didn’t have to cast. Here’s an example:

type MyFormTypes = {...};

const myForm = useForm<MyFormTypes>(...);

function formSubmit(data: MyFormTypes) {
  ...
}

<form
  onSubmit={myForm.handleSubmit((formData) =>
    formSubmit(formData as MyFormTypes)
  )}
>

#6523 (comment) #6523 (comment)

I will fix this

@kotarella1110 If I’m reading your comment correctly, it seems like the code I pasted above should no longer be a problem in the latest version, but I’m still seeing it. Putting the following code into VS Code still gives me the same TS error as before:

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

type Foo = {
  bar: () => {};
};

type FormTypes = {
  foo: Foo;
};

function App() {
  const form = useForm<FormTypes>();
  function formSubmit(data: FormTypes) {}
  return <form onSubmit={form.handleSubmit(formSubmit)} />;
}

export default App;

I will try to come up with a solution for this.

I believe I may be experiencing the same issue in an upgrade from v7.14.2 to v7.15.1. I get the following TS errors on my formSubmit function when I try to pass it to handleSubmit:

Argument of type '(data: FormTypes) => void' is not assignable to parameter of type 'SubmitHandler<FormTypes>'.
  Types of parameters 'data' and 'data' are incompatible.
    Type '{ foo: { get: {}; readonly isValid: boolean; readonly invalidReason: string | null; readonly invalidExplanation: string | null; readonly locale: string; readonly numberingSystem: string; ... 65 more ...; toRelativeCalendar: {}; }; }' is not assignable to type 'FormTypes'.
      The types of 'foo.get' are incompatible between these types.
        Type '{}' is not assignable to type '(unit: keyof DateTime) => number'.
          Type '{}' provides no match for the signature '(unit: keyof DateTime): number'.

In this case, I’m trying to use a luxon DateTime object in the form.

https://github.com/react-hook-form/react-hook-form/issues/6523#issuecomment-918854255 https://github.com/react-hook-form/react-hook-form/issues/6523#issuecomment-920160640

I will fix this

Same error on 7.27.1 using a Luxon Duration. Resolved by downgrading to 7.14.2.

I think we’re experiencing an issue related to this. For example if we want to use Set<string> as a type in our FormData this doesn’t work in latest versions.

Note that that used to work v7.12.2.

As far as I know, we don’t support custom Interface as above, @kotarella1110 is there any workaround for this usage?