Why are props type inferred in withForm

[dh94]

It's advised that in-order to be able to composite forms the withForm HOC is required.

From the docs

const ChildForm = withForm({
  // These values are only used for type-checking, and are not used at runtime
  // This allows you to `...formOpts` from `formOptions` without needing to redeclare the options
  defaultValues: {
    firstName: 'John',
    lastName: 'Doe',
  },
  // Optional, but adds props to the `render` function in addition to `form`
  props: {
    // These props are also set as default values for the `render` function
    title: 'Child Form',
  },
  render: function Render({ form, title }) {
    ....
  },
})

I'm all for type inference but when your component has props that are complicated you usually do something like this

 const ChildForm = withForm({
    props: {} as ComplicatedProps
    render: function Render({ form, ...complicatedProps }) {
       ...
    }
})

This feels like a bit of an anti-pattern, I understand the goal to avoid generics but it feels a bit of an extreme here.
The reason it feels like an anti pattern is because as a developer you are "lying" (saying {} is a complicated type) in order to satisfy type safety.

My question is - is there a recommended approach to dealing with this situation without "lying"?

General thoughts are that It would feel better if it was more explicit perhaps

   const ChildForm = withForm({
       props: withForm.props<ComplicatedProps>()
       ...
   })

Where withForm.props has this implementation

withForm.props = <PROPS>(defaultProps?: Partial<PROPS>) => defaultProps;

Or in general have this one exception to allow a generic type 😅.

[LeCarbonator]

The type for props is rather broad so that you can define a lot of types.

To preserve, say, an interface of your props, you can do the following:

interface YourProps {
  index: number;
  variant: 'edit' | 'create';
}
// These values will never be used in the component, but
// You'll have to define them outside if you want to avoid 'lying'
const props: YourProps = {
  index: 0,
  variant: 'edit',
};

const YourComponent = withForm({
  defaultValues,
  props: { ...props }, // avoid assigning directly as it will expect a Record<string, unknown>
  render: function Render(props) {
    props.variant // 'edit' | 'create' 
    return <></>;
  },
});

[LeCarbonator]

Hello again! I just made a discovery that could make it easier for you to define the types.

The extending features that interfaces have is the reason it is not assignable to Record<string, unknown>. However, you can convert interfaces into a type, which is compatible with Record<string, unknown>.

Solution 1:

type YourSubformProps = {
    nullableFoo: string | null,
    bar: SomeOtherType
}

const YourSubform = withForm({
    props: {} as YourSubformProps // works!
})

Solution 2:

// in a utils file
/*
* Convert any interface into a type which is compatible with `withForm.props`.
*/
export type FormPropsWrapper<T> = Omit<T, never>

interface YourSubformProps {
    nullableFoo: string | null,
    bar: SomeOtherType
}

const YourSubform = withForm({
    props: {} as YourSubformProps, // errors, it's an interface
    props: {} as FormPropsWrapper<YourSubformProps> // works!
})