fix: fix types useForm typehinting issue

Author: noxasch

packages/react/src/useForm.ts

@@ -6,10 +6,10 @@ import useRemember from './useRemember'
 type setDataByObject<TForm> = (data: TForm) => void
 type setDataByMethod<TForm> = (data: (previousData: TForm) => TForm) => void
 type setDataByKeyValuePair<TForm> = <K extends keyof TForm>(key: K, value: TForm[K]) => void
-type FormDataType = Record<string, FormDataConvertible>
+type FormDataType<T> = Record<keyof T, FormDataConvertible>
 type FormOptions = Omit<VisitOptions, 'data'>
 
-export interface InertiaFormProps<TForm extends FormDataType> {
+export interface InertiaFormProps<TForm extends FormDataType<TForm>> {
   data: TForm
   isDirty: boolean
   errors: Partial<Record<keyof TForm, string>>
@@ -35,12 +35,12 @@ export interface InertiaFormProps<TForm extends FormDataType> {
   delete: (url: string, options?: Partial<FormOptions>) => void
   cancel: () => void
 }
-export default function useForm<TForm extends FormDataType>(initialValues?: TForm): InertiaFormProps<TForm>
-export default function useForm<TForm extends FormDataType>(
+export default function useForm<TForm extends FormDataType<TForm>>(initialValues?: TForm): InertiaFormProps<TForm>
+export default function useForm<TForm extends FormDataType<TForm>>(
   rememberKey: string,
   initialValues?: TForm,
 ): InertiaFormProps<TForm>
-export default function useForm<TForm extends FormDataType>(
+export default function useForm<TForm extends FormDataType<TForm>>(
   rememberKeyOrInitialValues?: string | TForm,
   maybeInitialValues?: TForm,
 ): InertiaFormProps<TForm> {

packages/react/test-app/Pages/FormHelper/Data.jsx packages/react/test-app/Pages/FormHelper/Data.tsx

@@ -1,7 +1,14 @@
+
 import { useForm, usePage } from '@inertiajs/react'
 
+interface InputData {
+  name: string
+  handle: string
+  remember: boolean
+}
+
 export default (props) => {
-  const form = useForm({
+  const form = useForm<InputData>({
     name: 'foo',
     handle: 'example',
     remember: false,

packages/react/test-app/app.jsx

@@ -4,8 +4,12 @@ import { createRoot } from 'react-dom/client'
 createInertiaApp({
   page: window.initialPage,
   resolve: (name) => {
-    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
-    return pages[`./Pages/${name}.jsx`]
+    if (name === 'FormHelper/Data') {
+      return pages[`./Pages/${name}.tsx`]
+    }
+    
+    const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
+    return pages[`./Pages/${name}.tsx`]
   },
   setup({ el, App, props }) {
     createRoot(el).render(<App {...props} />)

packages/react/test-app/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+}

packages/svelte/src/useForm.ts

@@ -15,10 +15,10 @@ import cloneDeep from 'lodash/cloneDeep'
 import isEqual from 'lodash/isEqual'
 import { writable, type Writable } from 'svelte/store'
 
-type FormDataType = Record<string, FormDataConvertible>
+type FormDataType<T> = Record<keyof T, FormDataConvertible>
 type FormOptions = Omit<VisitOptions, 'data'>
 
-export interface InertiaFormProps<TForm extends FormDataType> {
+export interface InertiaFormProps<TForm extends FormDataType<TForm>> {
   isDirty: boolean
   errors: Partial<Record<keyof TForm, string>>
   hasErrors: boolean
@@ -46,14 +46,14 @@ export interface InertiaFormProps<TForm extends FormDataType> {
   cancel(): void
 }
 
-export type InertiaForm<TForm extends FormDataType> = InertiaFormProps<TForm> & TForm
+export type InertiaForm<TForm extends FormDataType<TForm>> = InertiaFormProps<TForm> & TForm
 
-export default function useForm<TForm extends FormDataType>(data: TForm | (() => TForm)): Writable<InertiaForm<TForm>>
-export default function useForm<TForm extends FormDataType>(
+export default function useForm<TForm extends FormDataType<TForm>>(data: TForm | (() => TForm)): Writable<InertiaForm<TForm>>
+export default function useForm<TForm extends FormDataType<TForm>>(
   rememberKey: string,
   data: TForm | (() => TForm),
 ): Writable<InertiaForm<TForm>>
-export default function useForm<TForm extends FormDataType>(
+export default function useForm<TForm extends FormDataType<TForm>>(
   rememberKeyOrData: string | TForm | (() => TForm),
   maybeData?: TForm | (() => TForm),
 ): Writable<InertiaForm<TForm>> {
@@ -86,7 +86,7 @@ export default function useForm<TForm extends FormDataType>(
       return Object.keys(data).reduce((carry, key) => {
         carry[key] = this[key]
         return carry
-      }, {} as FormDataType) as TForm
+      }, {} as FormDataType<TForm>) as TForm
     },
     transform(callback) {
       transform = callback
@@ -114,7 +114,7 @@ export default function useForm<TForm extends FormDataType>(
             .reduce((carry, key) => {
               carry[key] = clonedData[key]
               return carry
-            }, {} as FormDataType) as TForm,
+            }, {} as FormDataType<TForm>) as TForm,
         )
       }
 

packages/svelte/test-app/Pages/FormHelper/Data.svelte

@@ -1,7 +1,14 @@
-<script>
+<script lang="ts">
   import { page, useForm } from '@inertiajs/svelte'
 
-  const form = useForm({
+
+  interface InputData {
+    name: string
+    handle: string
+    remember: boolean
+  }
+
+  const form = useForm<InputData>({
     name: 'foo',
     handle: 'example',
     remember: false,

packages/vue3/src/useForm.ts

@@ -3,10 +3,10 @@ import cloneDeep from 'lodash.clonedeep'
 import isEqual from 'lodash.isequal'
 import { reactive, watch } from 'vue'
 
-type FormDataType = Record<string, FormDataConvertible>
+type FormDataType<T> = { [K in keyof T]: FormDataConvertible }; 
 type FormOptions = Omit<VisitOptions, 'data'>
 
-export interface InertiaFormProps<TForm extends FormDataType> {
+export interface InertiaFormProps<TForm extends FormDataType<TForm>> {
   isDirty: boolean
   errors: Partial<Record<keyof TForm, string>>
   hasErrors: boolean
@@ -32,14 +32,14 @@ export interface InertiaFormProps<TForm extends FormDataType> {
   cancel(): void
 }
 
-export type InertiaForm<TForm extends FormDataType> = TForm & InertiaFormProps<TForm>
+export type InertiaForm<TForm extends FormDataType<TForm>> = TForm & InertiaFormProps<TForm>
 
-export default function useForm<TForm extends FormDataType>(data: TForm | (() => TForm)): InertiaForm<TForm>
-export default function useForm<TForm extends FormDataType>(
+export default function useForm<TForm extends FormDataType<TForm>>(data: TForm | (() => TForm)): InertiaForm<TForm>
+export default function useForm<TForm extends FormDataType<TForm>>(
   rememberKey: string,
   data: TForm | (() => TForm),
 ): InertiaForm<TForm>
-export default function useForm<TForm extends FormDataType>(
+export default function useForm<TForm extends FormDataType<TForm>>(
   rememberKeyOrData: string | TForm | (() => TForm),
   maybeData?: TForm | (() => TForm),
 ): InertiaForm<TForm> {

packages/vue3/test-app/Pages/Remember/FormHelper/Default.vue

@@ -1,10 +1,16 @@
-<script setup>
+<script setup lang="ts">
 import { Link, useForm } from '@inertiajs/vue3'
 import { ref } from 'vue'
 
 const untracked = ref('')
 
-const form = useForm({
+interface InputData {
+  name: string
+  handle: string
+  remember: boolean
+}
+
+const form = useForm<InputData>({
   name: 'foo',
   handle: 'example',
   remember: false,