How to set props as types not values in form composition

[Aymen-Khanfir]

I currently have this code below and i want to know if there is any possible way to use interfaces to type my props instead of setting default values with the withForm hook

import { ELanguage, type PatientResponse } from '@/api/models/dtos/patient.dto.ts';

import { eventFormOpts } from '@/components/events/config/form-config.ts';
import { withForm } from '@/components/shared/form';
import { PatientSelect } from '@/components/shared/patient-select.tsx';

import { Label } from '@/components/ui/label.tsx';

export const PatientFormFields = withForm({
	...eventFormOpts,
	props: {
		patient: undefined as PatientResponse | undefined,
	},
	render: function Render({ form, patient }) {
		const [selectedPatient, setSelectedPatient] = useState<PatientResponse>();

		useEffect(() => {
			setSelectedPatient(patient);
		}, [patient]);

		useEffect(() => {
			form.resetField('patient_id');
			form.resetField('first_name');
			form.resetField('last_name');
			form.resetField('email');
			form.resetField('phone_number');
			form.resetField('birthdate');
			form.resetField('address');
			form.resetField('patient_note');
			if (selectedPatient) {
				form.setFieldValue('patient_id', selectedPatient.id);
				form.setFieldValue('first_name', selectedPatient.first_name);
				form.setFieldValue('last_name', selectedPatient.last_name);
				form.setFieldValue('email', selectedPatient.email);
				form.setFieldValue('phone_number', selectedPatient.phone_number || '');
				form.setFieldValue('birthdate', selectedPatient.birthdate ? new Date(selectedPatient.birthdate) : undefined);
				form.setFieldValue('language', selectedPatient.language);
				form.setFieldValue('address', selectedPatient.address || '');
				form.setFieldValue('patient_note', selectedPatient.notes || '');
			}
		}, [selectedPatient]);

		return (
			<>
				<Label className='gap-0.5'>Patient existant</Label>
				<PatientSelect
					selectedPatient={selectedPatient}
					setSelectedPatient={(patient) => {
						setSelectedPatient(patient);
					}}
				/>

				<form.AppField name='first_name'>
					{(field) => (
						<field.TextField
							label='Nom de famille'
							placeholder='Entrez le nom de famille du patient'
							disabled={selectedPatient !== undefined}
							required
						/>
					)}
				</form.AppField>

				<form.AppField name='last_name'>
					{(field) => (
						<field.TextField
							label='Prénom'
							placeholder='Entrez le prénom du patient'
							disabled={selectedPatient !== undefined}
							required
						/>
					)}
				</form.AppField>

				<form.AppField name='email'>
					{(field) => (
						<field.TextField
							label='Email'
							placeholder='Entrez l’email du patient'
							disabled={selectedPatient !== undefined}
							required
						/>
					)}
				</form.AppField>

				<form.AppField name='phone_number'>
					{(field) => (
						<field.TextField
							label='Numéro de téléphone'
							placeholder='Entrez le numéro de téléphone du patient'
							disabled={selectedPatient !== undefined}
						/>
					)}
				</form.AppField>

				<form.AppField name='birthdate'>
					{(field) => (
						<field.DatePickerField
							label='Date de naissance'
							placeholder='Entrez la date de naissance du patient'
							disabled={selectedPatient !== undefined}
						/>
					)}
				</form.AppField>

				<form.AppField
					name='language'
					children={(field) => (
						<field.SelectField
							label='Langue'
							placeholder='Sélectionner une langue'
							options={Object.keys(ELanguage).map((key) => ({
								label: key,
								value: ELanguage[key as keyof typeof ELanguage],
							}))}
							disabled={selectedPatient !== undefined}
							required
						/>
					)}
				/>

				<form.AppField name='address'>
					{(field) => (
						<field.TextField
							label='Adresse'
							placeholder='Entrez l’adresse du patient'
							disabled={selectedPatient !== undefined}
						/>
					)}
				</form.AppField>

				<form.AppField name='patient_note'>
					{(field) => (
						<field.TextareaField
							label='Note liée au patient'
							disabled={selectedPatient !== undefined}
						/>
					)}
				</form.AppField>
			</>
		);
	},
});
`

[LeCarbonator]

Sure there is! The props' keys and values are not used, but help with generics properly inferring. You can safely assert it inline:

interface MyProps {
   patient: PatientResponse | undefined
}

export const PatientFormFields = withForm({
	...eventFormOpts,
	props: {} as MyProps,
	render: function Render({ form, patient }) {
	  // ...
	}
})

The reason you can't add it as, say, withForm<MyProps> is because TypeScript does not allow partial generics inference. Basically, you either specify none and infer all, or you specify all ... 12 parameters? The number may change in the future, since we don't encourage doing that.