fix: maintain the form types when transforming with useTransform hook (#889)

Author: Balastrong

packages/react-form/src/useTransform.ts

@@ -1,12 +1,12 @@
-import type { FormApi, Validator } from '@tanstack/form-core'
+import type { FormApi, FormTransform, Validator } from '@tanstack/form-core'
 
 export function useTransform<
   TFormData,
   TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
 >(
   fn: (formBase: FormApi<any, any>) => FormApi<TFormData, TFormValidator>,
   deps: unknown[],
-) {
+): FormTransform<TFormData, TFormValidator> {
   return {
     fn,
     deps,

packages/react-form/tests/useTransform.test-d.tsx

@@ -0,0 +1,30 @@
+import { assertType, it } from 'vitest'
+import { formOptions, mergeForm, useForm, useTransform } from '../src'
+import { type ServerFormState } from '../src/nextjs/types'
+
+it('should maintain the type of the form', () => {
+  const state = {} as ServerFormState<any>
+
+  const formOpts = formOptions({
+    defaultValues: {
+      firstName: '',
+      age: 123,
+    } as const,
+  })
+
+  function Comp() {
+    const form = useForm({
+      ...formOpts,
+      transform: useTransform(
+        (baseForm) => mergeForm(baseForm, state),
+        [state],
+      ),
+    })
+
+    assertType<123>(form.state.values.age)
+    assertType<string>(form.state.values.firstName)
+
+    // @ts-expect-error this should be a number
+    form.state.values.age = 'age'
+  }
+})