Broken typing

[fjolliton]

I'm not sure how to qualify this issue. I didn't find something similar in the issues or in the discussions, which surprise me, so maybe I missed it.

I'm used to type everything possible in my code with TypeScript to catch as many errors as possible at compile time.

But there is a big problem in the code below: the score value of type number got silently transformed as a string when I edit the field!

I get it: the register takes the string value of the input, and store it in the object attribute score. Fine. But what worries me is that TypeScript is unable to detect this mistake, and the typing get broken since I end up with a string in a field typed as number.

Sure I could add a setValueAs in the register to convert the value, but I've yet to detect the mistake if it happens.

How could I strengthen the typing to prevent that?

When running the code below, this displays 42 initialy, then "42" (or something else) if I edit / blur the field, showing that my value got converted to a type that is inconsistent with the TypeScript definition.

type FormData = {
    score: number;
};

const TestForm = () => {
    const { register, watch } = useForm<FormData>({
        defaultValues: { score: 42 },
    });
    const data = watch('score');  // `data` is typed as `number` but might contain a `string`!
    return (
        <form>
            <input {...register('score')} />
            {JSON.stringify(data)}
        </form>
    );
};

[Moshyfawn]

You should pass the valueAsNumber: true to register's first arg options to convert the input's string number value to number

register("fieldName", { valueAsNumber: true })

There's no way to detect the input's event.target.value type passed into the form's value that's supposed to be a number at run-time in RHF as TS checks the types as when compiling

[Moshyfawn]

That said, you can validate the field's value at run time via the validate: value => /* your validation logic here */ callback

[fjolliton]

What worries me is that the code I was showing didn't throw any error. This shouldn't pass at compile time. This break the typing contract.

I understand it would be very cumbersome to force people passing a function to parse/cast/check in every register to ensure that the value obtained from the input can be stored in the field with the right type, "just" to make sure the typing is still valid. I also understand that today TypeScript is not flexible / advanced enough to properly type everything end-to-end.

But, then maybe that the watch method should return unknown to emphasis that we are not sure of the actual type. Moreover the setValueAs is defined as any => any, thus bypassing the typing. Passing valueAsNumber will store a number even if the field is of another type (such as a string). I also noticed that if I set a value to NaN, watch returns it as null even if it is typed as number.

If this stay as is, maybe this should be at least explicitly documented, to warn people about it.

In my case, I will try to overwrite the React-Hook-Form typing in my project, to force me to handle all register in such a way that I need to pass a setValueAs with the appropriate typing.

I didn't figured out how to overwrite the existing type, but here is an example of such an approach:

type UseFormRegisterStrict<
    TFieldValues extends FieldValues,
    TFieldName extends Path<TFieldValues> = Path<TFieldValues>,
> = (
    name: TFieldName,
    options: {
        setValueAs: (
            value: unknown,
        ) => FieldPathValue<TFieldValues, TFieldName>;
        // plus other options
    },
) => UseFormRegisterReturn<TFieldName>;

which then properly detects erroneous usage:

type FormData = {
    name: string;
    score: number;
};

const TestForm = () => {
    const { register: register_, watch } = useForm<FormData>({
        defaultValues: { name: 'Alice', score: 42 },
    });
    const register = register_ as UseFormRegisterStrict<FormData>;
    const data = watch(); // We expect {name: string; score: number}
    return (
        <form>
            <input {...register('name', { setValueAs: n => 'Bob' })} /> {/* Ok, correct type */}
            <input {...register('score')} /> {/* Fail, missing setValueAs */}
            <input {...register('score', { setValueAs: n => 'Bob' })} /> {/* Fail, bad type */}
            <input {...register('score', { setValueAs: n => 314 })} /> {/* OK, correct type */}
            <input
                {...register('score', {
                    setValueAs: n =>
                        typeof n === 'number'
                           ? n
                           : typeof n === 'string'
                           ? parseFloat(n)
                           : throw_some_error(),
                })}
            /> {/* OK, we get either the initial value (a number) or the string from the input which we cast to a number */}
            {JSON.stringify(data)}
        </form>
    );
};

[fjolliton]

Alternatively, I can define a stricter type variant of useForm with:

// NOTE: This is just an alias for `useForm` but typed in such a way that
// it require a `setValueAs` in the options that matches the type definition.
const useFormStrict: <TFieldValues extends FieldValues>(
    props?: UseFormProps<TFieldValues>,
) => Omit<UseFormReturn<TFieldValues>, 'register'> & {
    register: <TFieldName extends Path<TFieldValues> = Path<TFieldValues>>(
        name: TFieldName,
        options: Omit<RegisterOptions, 'setValueAs'> & {
            setValueAs: (
                value: unknown,
            ) => FieldPathValue<TFieldValues, TFieldName>;
        },
    ) => UseFormRegisterReturn<TFieldName>;
} = useForm;

which gives me:

type FormData = {
    score: number;
};

const TestForm = () => {
    const { register, watch } = useFormStrict<FormData>({
        defaultValues: { score: 42 },
    });
    return (
        <form>
            <input {...register('score', { setValueAs: () => 42 })} /> {/* OK, correct type */}
            <input {...register('score', { setValueAs: () => '42' })} /> {/* Fail, bad type */}
            <input {...register('score', { setValueAs: () => null })} /> {/* Fail, bad type */}
            <input {...register('score')} /> {/* Fail, missing setValueAs */}
        </form>
    );
};