headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

Better support for exactOptionalPropertyTypes: true

Open jakubmazanec opened this issue 1 year ago • 0 comments

Describe the bug and the expected behavior

When TypeScript compiler option exactOptionalPropertyTypes is set to true, you cannot pass undefined as a value to an object property that is marked as optional but without explicit undefined type. While IMO very useful option, it can lead to bad DX, because it can cause TypeScript errors:

import {Checkbox} from '@headlessui/react';

type CustomComponentProps = {
  name?: string | undefined;
}

let CustomComponent = ({name}: CustomComponentProps ) => {
 return <Checkbox name={name} />; // error here, because `name` prop can be `undefined`
}

I therefore prefer that "input" types (like function parameters, properties in options objects, etc.) have explicit undefined added to them; e.g. here should look like this:

export type CheckboxProps<
  TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG,
  TType = string,
> = Props<
  TTag,
  CheckboxRenderPropArg,
  CheckboxPropsWeControl,
  {
    value?: TType | undefined
    disabled?: boolean | undefined
    indeterminate?: boolean | undefined

    checked?: boolean | undefined
    defaultChecked?: boolean | undefined
    autoFocus?: boolean | undefined
    form?: string | undefined
    name?: string | undefined
    onChange?: ((checked: boolean) => void) | undefined
  }
>

Would it be possible to add undefined to all input types? Thank you.

jakubmazanec avatar Jul 16 '24 21:07 jakubmazanec