How to Creating Reusable Forms with TypeScript

[jun2077681]

Question: Issue with validate type inference in reusable TypeScript forms

I am trying to create reusable forms with TypeScript.

In the registerOptions's validate function, the value type is not being inferred correctly, so I would like to ask for a solution.

Below is my code:

export type FormRow<TFieldValues extends FieldValues = FieldValues> = {
  label: string;
  isRequired?: boolean;
  items: FormItem<TFieldValues>[];
  helperText?: string;
};

export type FormItem<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  id: TName;
  placeholder?: string;
  registerOptions?: RegisterOptions<TFieldValues, TName>;
} & FormInputDto;

export type FormInputDto = InputDto | SelectDto | ...

I am trying to use the code as follows:

interface ScheduleDto {
  title: string;
  startDate: Date;
  endDate: Date;
  count: number;
}

export const form: FormRow<ScheduleDto>[] = [
  {
    label: 'Title',
    isRequired: true,
    items: [
      {
        id: 'title',
        type: 'TEXT',
        registerOptions: { required: 'Title is Empty.' },
      },
    ],
  },
  {
    label: 'Due',
    isRequired: true,
    items: [
      {
        id: 'startDate',
        type: 'DATETIME',
        placeholder: 'Start Date',
        registerOptions: {
          validate: {
            isValid: (value) => {
              return (!!value && dayjs(value).isValid()) || 'Invalid Start Date.';
            },
          },
        },
      },
      {
        id: 'endDate',
        type: 'DATETIME',
        placeholder: 'End Date',
        registerOptions: {
          validate: {
            isValid: (value) => {
              return (!!value && dayjs(value).isValid()) || 'Invalid End Date.';
            },
          },
        },
      },
    ],
  },
];

In the isValid function for startDate and endDate, I expected the value to be inferred as Date, but it is actually inferred as string | number | Date, which includes all possible types of ScheduleDto values. Is there a solution to this problem?

[jun2077681]

somebody help me..