getValues() doesn't represent provided form generic

[tykhan]

Hey!
I have next question. Assume, I provided a generic to useForm hook, but I'm not forced to provide defaultValues. In that case, my initial form would be an empty object and any attempt to interact with it will lead to uncaught errors. As you see on screenshot typescript says 'foo' = string, but in reality it's undefined.
Am I doing something wrong or it is intended?

Also, if I want to provide default values, they are optional even I provided a generic where they are required

[sujinleeme]

Which react hook form do you use now?

The defaultValue type uses DeepPartial, which means all properties of an existing type(form value) are optional.

react-hook-form/src/types/form.ts

Line 47 in 306627e

export type DefaultValues<TFieldValues> =

The latest version(v7) has no problem with defining the FormData type

  const { getValues } = useForm<{
    foo: string;
  }>({
    mode: "all",
    defaultValues: {
      foo: undefined,
    },
  });

  // You may need to use the optional chaining operator because the value can be undefined.
  const fooLength = getValues().foo?.length; 

[tykhan]

@sujinleeme , thank for reply! I'm on the latest version

// You may need to use the optional chaining operator because the value can be undefined.
const fooLength = getValues().foo?.length;

Well, the problem here that typescript allows you NOT to use optional chaining, since it thinks it can be only string. And for sure it may lead to uncaught errors.

The question is actually, why defaultValues uses DeepPartial?
If I'd like my 'foo' to be undefined I would create appropriate type like
type MyFormT = { foo: string | undefined }

[sujinleeme]

The reason for using DeepPartial is to provide flexibility when initializing the form with default values.
It enables us to achieve partial initialization of form fields. For instance, 'foo' can be initialized as undefined, and 'bar' can be entirely omitted.

  const { getValues } = useForm<{
    foo: string;
    bar: string
  }>({
    mode: "all",
    defaultValues: {
      foo: undefined, 
    },
  });

If we specify default values, they must be provided with deep equality, as in { defaultValues: { foo: '' } }. Or all properties inside FormValue(MyFormT) will be optional. It will be hard to keep type safety when dealing with form errors or the onSubmit handler.

The generic type definition is not related to triggering error.

[tykhan]

@sujinleeme okay, let me rephrase that a bit
Is it expected that foo is typed as string here, even if in reality it is undefined? Don't you find it at least unsafe?

[sujinleeme]

Yes, it is expected because you provide the generic.

react-hook-form/src/types/form.ts

Line 837 in ebc1f2c

getValues: UseFormGetValues<TFieldValues>;

If you remove the generic type, react hook form will infer the type based on defaultValues

  const { getValues } = useForm({
    defaultValues: {
      foo: undefined,
    },
  });

  const values = getValues(); 

In my experience, the best way to solve this type of mismatching with the generic is just providing {foo: ''} if the field is a simple input component. Then you can avoid this.