Skip to content

Type of Key in react-aria does not match type of Key in React #5939

Open
@vbudovski

Description

@vbudovski

Provide a general summary of the issue here

The type of Key in react-aria is defined as:

export type Key = string | number;

while React defines it as:

type Key = string | number | bigint;

Is there a reason to not use the React definition of the key? You can re-export it from react-aria.
If you do wish to re-define it, perhaps it would be good to add some typechecks to react-aria to make sure they are interchangable at least.

e.g.

type AriaKey = string | number;
type Intersection = ReactKey & AriaKey;
let reactKey: ReactKey;
// This line will produce a TypeScript error if they don't overlap.
const intersection: Intersection =
    // @ts-ignore We don't care about this error.
    reactKey;

🤔 Expected Behavior?

React Key can be passed to props expecting a unique ID/key.

😯 Current Behavior

There's a type mismatch and TypeScript complains when you pass a React Key to id prop for instance.

💁 Possible Solution

See above.

🔦 Context

No response

🖥️ Steps to Reproduce

import type { Key } from 'react';

const id: Key = '123'

<Tag
    // @ts-ignore FIXME: Incorrect type in react-aria-components.
    id={id}
>
  Hello
</Tag>

Version

RAC 1.1.1

What browsers are you seeing the problem on?

Other

If other, please specify.

TypeScript issue.

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions