How would I name these types in a way that's accurate and not redundant? I have a component that shows the status of a customer's billing plan. There are about seven different states it can be in, with about six props each (I've simplified it down to two for this example). I'm trying to create an enum that I can get the props from, to be used like this:
&lt;PlanCard {...PlanCardProps.TrialPlan} /&gt;

But I'm trying to give it proper typing. The names just feel wonky here though. I hate using &quot;type&quot; as part of the name of a type, but given that the enum is called PlanCardProps, I just didn't know what to call the typing for the object literal and for its values.
Is there a better way of naming this?
export type PlanCardPropsType = {
  header: string;
  ctaText: string;
};

type PlanCardPropsEnum = {
  [key: string]: PlanCardPropsType;
};

export const PlanCardProps: PlanCardPropsEnum = {
  TrialPlan: {
    header: 'x',
    ctaText: 'click here'
  },
  NoPlan: {
    header: 'y',
    ctaText: 'cancel'
  }
};
Given that:

PlanCardPropsEnum is only referenced once, in the type definition of PlanCardProps
PlanCardPropsEnum is not exported
The exported object is absolutely constant (right?)
The exported object is not props, but a container for different possible props

I would refactor it to:

Rename the exported object to UPPER_SNAKE_CASE, which is acceptable for absolute constants/enums. Maybe call it AVAILABLE_PLAN_CARD_PROPS, since it's not props itself, but a container around multiple props. Or you could call it ALL_PLAN_CARD_PROPS.
Remove PlanCardPropsEnum completely. TypeScript can already automatically infer the type of the object to have values of { header: string; ctaText: string; };, and you probably shouldn't type as [key: string] because you only have &quot;around six props each&quot; - you'd want only those particular props to be referenceable on the object, and for any other property accesses to throw a TS error.
Then, PlanCardPropsType can be renamed to PlanCardProps:

export type PlanCardProps = {
  header: string;
  ctaText: string;
};

// This could also be called AvailablePlanCardProps
// now that its name doesn't collide with another's
export const AVAILABLE_PLAN_CARD_PROPS = {
  TrialPlan: {
    header: 'x',
    ctaText: 'click here'
  },
  NoPlan: {
    header: 'y',
    ctaText: 'cancel'
  }
};

It can often be good to avoid explicit typing - better to let TS automatically infer types. This cuts down on code that needs to be read.
It's unfortunate that props is plural; if it were singular, it would be easier to come up with a good name to distinguish the collection from the individual.
Note that &quot;enum&quot; is a keyword with a specific meaning in TS. Probably best only to refer to actual TS enums as &quot;enum&quot;, else you may confuse people.
If you're worried about possibly making a typo and, for example, mis-typing headrr instead of header, you could define the object first (so that all the keys get included in the type, without repetition), then assign the object to another variable whose type is a Record of those keys and the PlanCardProps:
export type PlanCardProps = {
  header: string;
  ctaText: string;
};

// Ensure that the values of the exported object match PlanCardProps:
type Keys = keyof typeof AVAILABLE_PLAN_CARD_PROPS_INITIAL;
export const AVAILABLE_PLAN_CARD_PROPS: Record&lt;Keys, PlanCardProps&gt; = AVAILABLE_PLAN_CARD_PROPS_INITIAL;

This will throw a TS error if you make a typo.