Incorrect types: Form should extend RequestPayload

[Bloemendaal]

Resubmission of #1479 since this is still a problem for us.

I'm getting the following errors:

TS2344: Type 'MyFormData' does not satisfy the constraint 'Record<string, unknown>'.
Index signature for type 'string' is missing in type 'MyFormData'.

This PR uses the RequestPayload type which is also used by the router to validate the data.

[jessarcher]

Hey @Bloemendaal,

Where are you seeing this error? I can't figure out how to replicate it to confirm the issue and solution.

Can you please provide a minimal reproduction?

[Bloemendaal]

Hi @jessarcher! Thanks voor looking into this. Here's an snippet from our codebase:

interface FormData {
    fullName: string;
    phone: string;
    email: string;
}

export interface BasicInfoProps extends SharedProps {
    fullName: string;
    phone: string;
    email: string;
}

const BasicInfo = ({
    nextRouteUri,
    errors,
    fullName,
    phone,
    email,
}: BasicInfoProps) => {
    const { data, setData, post, processing } = useForm<FormData>('basicInfo', {
        fullName: fullName || '',
        phone: phone || '',
        email: email || '',
    });

    // ...

    return <div>Hello {data.fullName}!</div>
};

This gives the following error:

[reinink]

Hey @Bloemendaal thanks so much for submitting this fix, but I think we're going to go with the solution in #1649 instead — which should also solve this issue for you 👍