What is the correct TypeScript type for fields returned by useForm()

[aayushmaan-54]

I'm using useForm from Conform with a nested Zod schema (fileUploadSchema). The hook returns form and fields, like this:

const [form, fields] = useForm({
  lastResult,
  onValidate({ formData }) {
    return parseWithZod(formData, {
      schema: fileUploadSchema,
    });
  },
  shouldValidate: "onBlur",
  shouldRevalidate: "onInput",
});

Inside my form, I'm passing fields as props to a child component (<Dropzone />), like this:

<Form action={action} id={form.id} onSubmit={form.onSubmit}>
  <Dropzone
    onFilesAdded={handleFilesAdded}
    isUploading={isUploading || isPending}
    isDragging={isDragging}
    setIsDragging={setIsDragging}
    fileInputRef={fileInputRef}
    formFields={fields}
  />
</Form>

My DropzoneProps interface currently has this:

interface DropzoneProps {
  ...
  formFields: any; // ← I want to replace this with the accurate type
}

❓ Question: What is the correct TypeScript type for fields returned by useForm() when using a nested Zod schema like fileUploadSchema?

I want to avoid using any and get full IntelliSense and type safety

[chimame]

hi @aayushmaan-54
I just wrote it as a test, so it may not be accurate. How about defining the type like this?

conform/packages/conform-react/hooks.ts

Lines 46 to 69 in 0c00a13

	export function useForm<
	Schema extends Record<string, any>,
	FormValue = Schema,
	FormError = string[],
	>(
	options: Pretty<
	Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
	/**
	* The form id. If not provided, a random id will be generated.
	*/
	id?: string;
	/**
	* Enable constraint validation before the dom is hydated.
	*
	* Default to `true`.
	*/
	defaultNoValidate?: boolean;
	}
	>,
	): [
	FormMetadata<Schema, FormError>,
	ReturnType<FormMetadata<Schema, FormError>['getFieldset']>,
	] {

import type { FormMetadata } from '@conform-to/react';
import type { output } from 'zod';

type Props = {
  fields: ReturnType<FormMetadata<output<typeof fileUploadSchema >, any>['getFieldset']>
}

const Dropzone = ({ fields }: Props) => {
  return (
    ...
  )
}