Typescript with PropTypes in React throws error with enums

Question

I'm having some issues with defining the PropTypes for a string enumerator. I have the following type in Typescript:

state: "pending"|"accepted"|"rejected",

and the corresponding propType:

state: PropTypes.oneOf(["pending","accepted","rejected"]).isRequired,

This, however throws the following error: "Type 'string' is not assignable to type '"pending" | "accepted" | "rejected"'.ts(2322)". I really don't know what to do! Thanks in advance for any help you can give me.

The second line, the PropType one. It detects as "string" the propType, and as "pending" | "accepted" | "rejected" the TypeScript property — Michele Grisafi
– Michele Grisafi, Commented Aug 10, 2021 at 18:52
Can you provide a minimal reducible example? The closest I got was tsplay.dev/w11AYw. But I'm not familiar enough with this library to get it wired up how you have it. — Alex Wayne
– Alex Wayne, Commented Aug 10, 2021 at 18:57

hanan · Accepted Answer · 2021-08-10 19:31:55Z

1

Issue is state has type "pending"|"accepted"|"rejected" and its not Enum its Union type and["pending","accepted","rejected"] has type string[]

you have to Tell Typescript its "pending"|"accepted"|"rejected" [] not string[]

For convenience I'm going to create a new type

type State = 'pending' | 'accepted' | 'rejected';

state: State = 'pending'

// we have to tell typescript its type is not string[] but State[] 
state: PropTypes.oneOf(['pending','accepted','rejected'] as State[]).isRequired

here is Example that I have created for you.

edited Aug 10, 2021 at 19:31

answered Aug 10, 2021 at 18:58

hanan

1,9291 gold badge16 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Typescript with PropTypes in React throws error with enums

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related