adobe / adobe/react-spectrum

`react-aria` should support `exactOptionalPropertyTypes`

Open
#8,717 4 comments 5 reactions 0 assignees View on GitHub
typescript
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

As discussed [here](https://github.com/adobe/react-spectrum/issues/1890#issuecomment-2117890291):

>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.

```tsx

```

### 🤔 Expected Behavior?

I expect this code to transpile successfully:

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

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

return {children};
}
```

### 😯 Current Behavior

Currently, this throws an error:

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

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

return {children};
}
```

```
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' 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) => void'.
Type 'undefined' is not assignable to type '(e: 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.