Typescript FormValues examples are inaccurate when used with watch/setField

[viveleroi]

In many RHF examples, like this https://react-hook-form.com/ts#Control - useForm is given an interface that represents the form data:

type FormValues = {
  firstName: string
  lastName: string
}

Except, this is really only accurate after validation. If I don't define a default value, the field value will be undefined and if a user deletes all values from a field, RHF sets the field value to null

When I watch the value, typescript thinks its value is string when in reality it's string | null | undefined. It's only string when the submit button is clicked and validation has passed.

We're struggling to handle this because the interface for "form values" is different than "submitted, valid values". Why doesn't RHF explain or handle this?

Is there some fix we're not seeing?

Either we have cast all the time we watch something or use setField or we have to cast on submission.

[vanwalj]

Quite an old topic but I struggle with the same issue, are we doing something wrong? Is this the expected behaviour?

What I generally end up doing is something like

const form = useForm<DeepPartial<FormSchema>, unknown, FormSchema>(...)

But I'm wondering if that's the best way to proceed