How to use Typescript Union Type in React PropTypes?

Question

I am trying to do something like that:

interface Props extends RouteComponentProps {
  country: 'ONE' | 'OTHER;
}
MyComponent.propTypes = {
  country: PropTypes.oneOf(['ONE', 'OTHER']).isRequired,
};

And I am receiving this error:

Type 'Validator<string>' is not assignable to type 'Validator<"ONE" | "OTHER">'.
  Type 'string' is not assignable to type '"ONE" | "OTHER"'.ts(2322)

Two doubts:

How can I type it using PropTypes?
There is a simpler way to work with both Typescript and PropTypes in a TypeScript Create React APP application?

Why are you using proptypes at the same time with Typescript? — Guy Incognito
– Guy Incognito, Commented Jun 24, 2020 at 19:52
@GuyIncognito they not contradict, you can and sometimes should use them both. — Dennis Vash
– Dennis Vash, Commented Jun 24, 2020 at 20:00
It's perfectly fine to use both. If you're working on a library, the consumers of your code may be using JavaScript — and PropTypes is the only way for them to validate their props. Also, PropTypes can detect excess properties that cause wasted renders. — Karol Majewski
– Karol Majewski, Commented Jul 1, 2020 at 14:15

Karol Majewski · Accepted Answer · 2020-07-01 14:20:48Z

8

Narrow the type from string[] to ['ONE', 'OTHER'] using a const assertion:

MyComponent.propTypes = {
  country: PropTypes.oneOf(['ONE', 'OTHER'] as const).isRequired,
};

answered Jul 1, 2020 at 14:20

Karol Majewski

26.2k9 gold badges53 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eliav Louski Over a year ago

this should be noted in the official docs of propTypes! hours!

Dennis Vash · Accepted Answer · 2020-06-24 20:02:51Z

0

When working with Typescript, there are tools for converting types to their PropTypes equiviliants.

Tools like:

For anyone who wonders why you should use PropTypes with Typescript, read here.

answered Jun 24, 2020 at 20:02

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Collectives™ on Stack Overflow

How to use Typescript Union Type in React PropTypes?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related