Using typescript enum and react to expect string prop

Question

I'm trying to strict type a Button component in React.

How can I expect a prop with a specific string value?

My current attempt results in Type '"primary"' is not assignable to type 'ButtonLevel'

enum ButtonLevel {
  Primary = "primary",
  Secondary = "secondary",
  Warning = "warning"
}

interface IButtonProps {
  level: ButtonLevel,
  disabled?: boolean
}

function MyButton(props: IButtonProps) {
  return (<Button>ABC</Button>)
}

function test() {
  return (<MyButton level="primary" ></MyButton>)
}

Lex · Accepted Answer · 2020-04-07 05:47:24Z

7

Right... just enter the values pipe separated

interface IButtonProps {
  level: "primary" | "secondary" | "warning",
  disabled?: boolean
}

function test() {
  return (<MyButton level="ad" disabled >Continue</MyButton>)
}

Which then warns a component consumer the value is invalid.

edited Apr 7, 2020 at 5:47

answered Jul 19, 2019 at 2:52

Lex

5,0844 gold badges48 silver badges70 bronze badges

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

Comments

MrSea · Accepted Answer · 2023-06-01 07:15:23Z

5

you can use ${ButtonLevel} to get ButtonLevel Enum value.

such as

enum ButtonLevel {
  Primary = 'primary',
  Secondary = 'secondary',
  Warning = 'warning',
}

interface IButtonProps {
  level: `${ButtonLevel}`;
// (property) IButtonProps.level: "primary" | "secondary" | "warning"
  disabled?: boolean;
}

function MyButton(props: IButtonProps) {
  return <Button>ABC</Button>;
}

function test() {
  return <MyButton level="primary"></MyButton>;
}

answered Jun 1, 2023 at 7:15

MrSea

511 silver badge3 bronze badges

3 Comments

Martin Over a year ago

This actually works. I have to admit I was surprised by that. So yes, this is a valid alternative. Although I consider the string literal type solution from the accepted answer as simpler, more straight to the point, less confusing, and therefore preferrable. But -nonetheless- nice answer.

Lex Over a year ago

Cool! I didn't know you could do this string interpolation of an Enum to string union!

Barleby Over a year ago

Depending on how reusable fix you look for, this answer might be better over: level: "primary" | "secondary" | "warning" because it doesn't force you to harcode the literals. In my app I have constants like "pirmary", "secondary" etc used all over and with: level: ${ButtonLevel} everything is centralized in case you should change the literals

Adrian Brand · Accepted Answer · 2019-07-19 05:24:36Z

3

When you use enum you pass ButtonLevel.Primary not 'primary', the point of enums is to be strongly typed and prevent typos.

answered Jul 19, 2019 at 5:24

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Collectives™ on Stack Overflow

Using typescript enum and react to expect string prop

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related