`react-aria` should support `exactOptionalPropertyTypes`

[quisido]

Provide a general summary of the feature here

As discussed here:

This would make it much easier to use the library in projects with exactOptionalPropertyTypes enabled. Otherwise, all undefined props passed into React Aria Components throw a type error. Workarounds are ugly. e.g.

<Checkbox
  {...(isIndeterminate === undefined ? {} : { isIndeterminate })}
>
  …
</Checkbox>

🤔 Expected Behavior?

I expect this code to transpile successfully:

export interface ButtonProps {
  readonly children: string;
  readonly onClick?: VoidFunction | undefined;
}

export default function Button({ children, onClick }: ButtonProps): ReactElement {
  const { buttonProps } = useButton(
    { onClick },
    null,
  );

  return <button {...buttonProps}>{children}</button>;
}

😯 Current Behavior

Currently, this throws an error:

export interface ButtonProps {
  readonly children: string;
  readonly onClick?: VoidFunction | undefined;
}

export default function Button({ children, onClick }: ButtonProps): ReactElement {
  const { buttonProps } = useButton(
    { onClick }, // ❌
    null,
  );

  return <button {...buttonProps}>{children}</button>;
}

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ onClick: VoidFunction | undefined; }' is not assignable to parameter of type 'AriaButtonOptions<ElementType>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
      Types of property 'onClick' are incompatible.
        Type 'VoidFunction | undefined' is not assignable to type '(e: MouseEvent<FocusableElement, MouseEvent>) => void'.
          Type 'undefined' is not assignable to type '(e: MouseEvent<FocusableElement, MouseEvent>) => void'.ts(2769)

💁 Possible Solution

The interfaces for the react-aria hooks should be defined as property?: X | undefined instead of just property?: X.

🔦 Context

I am trying to use react-aria as a dependency in my application that uses exactOptionalPropertyTypes: true.

💻 Examples

Included above.

🧢 Your Company/Team

Everyone in the world

🕷 Tracking Issue

N/A

[snowystinger]

See #1890 (comment)

I am not sure it's as straightforward as just adding undefined to literally everything. I'm also not sure we want to actually do this, it's a lot of extra info that doesn't really communicate much and makes it that much harder to read the types. If it is as straightforward as adding it to everything, maybe it'd be easier to write it as a plugin to be added at build time?

[snowystinger]

Talked about with the team today. Next steps for anyone would be:

• Is it actually representative of the types to add | undefined to every one of our usages of optional ?, are we relying on the very thing that the type would call out anywhere?
• Can we write a build plugin that adds the type at build time instead? That way we don't need to pollute our source code and make it less readable

Alternatively, is there a TS option or TS plugin to mark a package which uses optional as synonymous with undefined? It's a bit crazy that every library must be stricter than everyone who uses them. Surely this has been addressed somewhere?

[quisido]

For posterity, the difference between prop?: T and prop?: T | undefined:

prop?: T is beneficial when prop is expected to be missing as opposed to undefined.

interface Props {
  readonly value?: string;
}

function Component(props: Props): ReactElement {
  if ('value' in props) {
    return <>{props.value.split('').reverse().join('')}</>;
  }
  return <>Hello!</>;
}

<Component /> // ✅ Hello!
<Component value="Hello!" /> // ✅ !olleH
<Component value={undefined} /> // ❌ Runtime error

If the value can be undefined, then | undefined is technically more correct.