[2.0.1] Typehinting useForm with interface gives error.

[james-atlasopen]

Version:

• @inertiajs/react version: 2.0.1

Describe the problem:

Using an interface to typehint useForm throws a Typescript error in version 2.0.1, whereas in 2.0.0 it worked.

Steps to reproduce:

1. Create an interface describing an object.
2. Pass it into useForm for the type parameter.

Example:

  interface ConnectionData {
    url: string | null;
    host: string;
    port: string;
  }
  
  const form = useForm<ConnectionData>({
    url: connection?.url ?? "",
    host: connection?.host ?? "",
    port: connection?.port ?? "",
  });

Gives the following error:

TS2344: Type ConnectionData does not satisfy the constraint FormDataType. Index signature for type string is missing in type ConnectionData

I believe it is related to the changes made in #2060

[selcuksarikoz]

same issue

[Spice-King]

Bisected to 93af171, which is indeed part of #2060. The Svelte adapter has the same issue, where as the Vue 3 one does not as it still uses object.

Short term fix, define ConnectionData as a type, rather than an interface. This is due to how TypeScript gives a type a free index key that satisfies Record. The one thing you lose is interface merging, and you are probably not using that here.

import { useForm } from '@inertiajs/react'

type ConnectionData = {
  url: string | null
  host: string
  port: string
}

declare const connection: Partial<ConnectionData> | undefined | null

const form = useForm<ConnectionData>({
  url: connection?.url ?? '',
  host: connection?.host ?? '',
  port: connection?.port ?? '',
})

[Andyuu]

The commit #2060 is also giving me issues because I cannot include typed Dayjs objects from date pickers to then transform for submission.

    const form = useForm({
        bornOn: undefined as Optional<Dayjs>,
    });

    form.transform(({ bornOn }) => ({
        bornOn: bornOn?.format('YYYY-MM-DD'),
    }));

Considering that this causes issues for any other objects too, I believe this change should be reverted.

[lcdss]

I had to convert my interfaces to type to be able to pass tsc.

[HubertAlva]

I have the same problem with Vue 3 and inertia 2.0.3

[sebastiaanluca]

Adding [key: string]: any to the interface resolves the warning, but loosens/removes type checks so that's not desirable.

interface ConnectionData {
    url: string | null;
    host: string;
    port: string;
    [key: string]: any
}

On @inertiajs/[email protected]

[juanparati]

The solution of @sebastiaanluca works because allow to introduce a dynamic property for the interface, however is not totally suitable because now is easy to assign values to wrong parameters without any warning from the typescript linter.