How can I set an empty string as the default for an optional number field with React Hook Form and Zod?

I have a form field that may either have no input or must contain a number.

I defined my Zod schema to accept either an empty string literal or a number. However, when I set the default value to an empty string ("") for my property optionalNumber in React.useForm(), TypeScript complains that a string is not assignable to type number. Also, when used with react-hook-form, a runtime warning appears about converting controlled components into uncontrolled ones if default values are not provided properly.

Here is my schema:

JAVASCRIPTCopied
const mySchema = z.object(
  optionalNumber: z.literal('')
    .or(z.coerce.number())
    .transform((val) => val === '' ? undefined : val)
);

And the problematic default value assignment:

TYPESCRIPTCopied
const form = useForm(z.infer<typeof mySchema>({
  resolver: zodResolver(mySchema),
  defaultValues: {
    optionalNumber: '' // TS2322: Type string is not assignable to type number
  }
}));

The issue arises because the defaultValues parameter expects the input type, but z.infer returns the output type due to z.transform(). As suggested by some comments, using z.input explicitly tells TypeScript that the default value matches the input type. This allows the field to initialize with no input ("") and later handle numeric input properly.

Is there a recommended approach to initialize a react-hook-form field with an empty string for a Zod-typed optional number property, without triggering TypeScript errors and runtime warnings?

EDIT: As pointed out, once z.transform() is used, you need to distinguish between the input and output types. Using z.input is a viable solution:

JAVASCRIPTCopied
price: z.string().optional().transform((val) => {
  if(val === '' || typeof val === 'undefined') {
    return undefined;
  } else {
    return parseInt(val, 10);
  }
}).refine((val) => 
  typeof val === 'undefined' || val >= 0, { 
    message: "Price must at least be 0"
  })

And in React.useForm():

TYPESCRIPTCopied
const form = useForm(
  z.input<typeof mySchema>({ // <== z.input ensures the default value matches the schema’s input type
    resolver: zodResolver(mySchema),
    defaultValues: {
      optionalNumber: ''
    }
  });