airjp73 / rvf

Easy form validation and state management for React and Remix
https://rvf-js.io
MIT License
827 stars 66 forks source link

Add explicit `undefined`s to `MinimalInputProps` #280

Closed haines closed 1 year ago

haines commented 1 year ago

With the compiler option exactOptionalPropertyTypes is set to true (e.g. when using @tsconfig/strictest base config), the type of getInputProps can't be inferred correctly.

For example, using the Checkbox component from the docs app:

Checkbox.tsx:21:49 - error TS2345: Argument of type '{ type: string; value: string | undefined; }' is not assignable to parameter of type 'Omit<MinimalInputProps, HandledProps | Callbacks> & Partial<Pick<MinimalInputProps, Callbacks>>'.
  Object literal may only specify known properties, and 'value' does not exist in type 'Omit<MinimalInputProps, HandledProps | Callbacks> & Partial<Pick<MinimalInputProps, Callbacks>>'.

21           {...getInputProps({ type: "checkbox", value })}
                                                   ~~~~~

Found 1 error in Checkbox.tsx:21

The generic type argument for getInputProps is inferred as MinimalInputProps, because the actual props of the input element don't extend that type. Explicitly providing the type argument makes that clear:

Checkbox.tsx:21:29 - error TS2344: Type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>' does not satisfy the constraint 'MinimalInputProps'.
  Types of property 'onChange' are incompatible.
    Type 'ChangeEventHandler<HTMLInputElement> | undefined' is not assignable to type '(...args: any[]) => void'.
      Type 'undefined' is not assignable to type '(...args: any[]) => void'.

21           {...getInputProps<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>({ type: "checkbox", value })}
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 1 error in Checkbox.tsx:21

Adding an explicit | undefined to all the prop types in MinimalInputProps (to match the definition in @types/react) fixes the issue.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
remix-validated-form ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 12, 2023 0:42am