Pass a TypeScript Type as a prop to a React component?

Question

Is it possible to pass a TypeScript type as a prop to a React Component?

export type ActivitiesType = {
  RUN: "RUN";
  WALK: "REST";
  ROUNDS: "ROUNDS";
};

<MyComponent activity={ActivitiesType.RUN} />

Then in MyComponent:

const MyComponent = ({ activity }) => {
  if(activity === ActivitiesType.RUN) {
    // Do something
  }
}

I'm not sure if it's possible as types aren't there at runtime. Why not using a field type in activity? Here is more from the official doc — Arnaud Claudel
– Arnaud Claudel, Commented Apr 7, 2020 at 12:17
You are looking for generics, please read this stackoverflow.com/questions/57208569/… maybe is a duplicate — Leo Borai
– Leo Borai, Commented Apr 7, 2020 at 12:22
Related: How do the different enum variants work in TypeScript?. Your type is essentially an ambient enum. You need a real one that exists at runtime. — VLAZ
– VLAZ, Commented Apr 7, 2020 at 12:23

Evanss · Accepted Answer · 2020-04-10 05:55:28Z

1

Ritaj was right, Enums can do this:

enum ActivitiesType {
  RUN: "RUN";
  WALK: "REST";
  ROUNDS: "ROUNDS";
}

type Props = {
  type: ActivitiesType;
}

answered Apr 10, 2020 at 5:55

Evanss

22.5k101 gold badges327 silver badges563 bronze badges

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

1 Answer 1