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, Jun 24 '20 at 19:52
@GuyIncognito they not contradict, you can and sometimes should use them both. — Dennis Vash, Jun 24 '20 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, Jul 01 '20 at 14:15

score 7 · Answer 1 · answered Jul 01 '20 at 14:20

7

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

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

answered Jul 01 '20 at 14:20

Karol Majewski

23,596
8
44
53

this should be noted in the official docs of propTypes! hours! – Eliav Louski Feb 28 '21 at 18:36

score 0 · Answer 2 · answered Jun 24 '20 at 20:02

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 '20 at 20:02

Dennis Vash

50,196
9
100
118

How to use Typescript Union Type in React PropTypes?

2 Answers2