reactjs - Förklaring av action creator och extrahering av typer från dem


Jag håller på att sätta ihop en liten app med TypeScript, React och Redux, och jag stötte på den här lilla saken som kallas en action creator.

Koden för action creator-klassen är följande, ursprunglig skapare, och props går till github@plotrwitek;

export class ActionCreator<T, P> {
  readonly type: T;
  readonly payload: P;

  constructor(type: T) {
    this.type = type;
  }

  create = (payload: P) => ({
    type: this.type,
    payload
  });
}

Nu, i reduceraren, instansierar jag dessa action creators och extraherar de olika typerna som följer;

export const ActionCreators = {
  TestAction: new ActionCreator<'TestAction', string>('TestAction'),
};

Anledningen till att jag använder Partial<...> nedan är för att det skulle klaga på en saknad create-egenskap, som finns på klassen, men inte på det som returneras från create-metoden.

export type Action = Partial<typeof ActionCreators[keyof typeof ActionCreators]>;

Det jag undrar är följande; kan någon vänligen förklara hur typeof ...[keyof typeof ...] fungerar, och om möjligt; ge en alternativ lösning på detta som tar hänsyn till den saknade create-egenskapen - en typ som endast innehåller de möjliga värdena som returneras från create-metoden.

Tack.

Svar #1

tl;dr Den resulterande typen av typeof SomeObject[keyof typeof SomeObject] kommer att vara unionen av SomeObject:s värdetyper. I ditt exempel Partial<ActionCreator<"TestAction", string>>. Det är i princip en lista över alla befintliga åtgärder.

Här är en förklaring av stegen:

  1. typeof ActionCreators: Ber TS att använda typen av konstanten
  2. keyof (1): Kommer att ge dig unionstypen av alla nycklar i ActionCreators. I ditt fall är det bara en: TestAction
  3. typeof ActionCreators[(2)] kommer att ge dig värdet av alla nycklar. Det är mer eller mindre som att "iterera" över objektet och "returnera" dess värdetyper.

Vilken version av TypeScript använder du? Jag får inget fel när jag tar bort Partial (använder TS 2.6.2).