Skip to content

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

@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

Activity

snowystinger

snowystinger commented on Feb 26, 2024

@snowystinger
Member

Great question. We moved away from their definition because they introduced a breaking change to it in a minor. However, we were already thinking of moving away from it as it isn't really the same thing as in React and it didn't make sense to be tied to their definition.

vbudovski

vbudovski commented on Feb 26, 2024

@vbudovski
Author

Thanks for that. Would it be better to rename it then? Any reason not to include bigint as well? Some additional documentation highlighting this type would be helpful.

snowystinger

snowystinger commented on Feb 26, 2024

@snowystinger
Member

We can't rename it without a big breaking change. Though we're slowly moving away from it with continued support. We didn't include BigInt because we have not tested with those values.

Kadrian

Kadrian commented on Apr 12, 2024

@Kadrian

Is there anything you'd recommend we do in the mean time? Should we simply add @ts-expect-error to all places we encouter this error? Or is there a way to globally ignore this somehow?

snowystinger

snowystinger commented on Apr 12, 2024

@snowystinger
Member

It'd be best for future updates if you changed to import {Key} from 'react-aria-components';
You can rename it if you like as well, import {Key as RACKey} from 'react-aria-components';

There may be some libraries that allow you to ignore certain ts codes as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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

        Participants

        @snowystinger@Kadrian@vbudovski

        Issue actions

          Type of Key in react-aria does not match type of Key in React · Issue #5939 · adobe/react-spectrum