Type 'X' cannot be used as an index type

Question

I receive en error in typescript:

message: 'Type 'TransitionStyles' cannot be used as an index type.'

I would like to know if it is possible to change my interface so it can also be used and an index type :

export interface TransitionStyles {
  entering: Object
  entered: Object
  exiting: Object
  exited: Object
  [key: string]: Object
}

or I am forced to use a different interface as:

export type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited'

Answer 1

I think you want something akin to

export interface TransitionStyles {
  entering: object;
  entered: object;
  exiting: object;
  exited: object;
}

export type TransitionState = keyof TransitionStyles;

export type PromisifiedTransitionStyles = {
  [P in TransitionState]: Promise<TransitionStyles[P]>
};

Note that if we reintroduce the string index signature, [key: string]: TransitionState , the key type TransitionState , will collapse to just string because in the type string | "literal" string | "literal" the more general type subsumes the more specific constituents of the union.