reactjs - Strängsammanfogning i enum-värde

Jag försöker refaktorera mina redux-actiontyper till att vara enum-typ, men problemet är att jag skulle vilja generera värden genom strängsammanfogning.

För närvarande ser min handling ut så här (den är inte symmetrisk, så statiska generatorer fungerar inte):

export const TYPE = '@@FOLDER';
export const FolderActionTypes = {
    REQUEST: `${TYPE}/REQUEST`,
    SUCCESS: `${TYPE}/SUCCESS`,
    ERROR: `${TYPE}/ERROR`,
    CHECK: `${TYPE}/CHECK`,
    UNCHECK: `${TYPE}/UNCHECK`,
    CLOSE: `${TYPE}/CLOSE`,
    OPEN: `${TYPE}/OPEN`
};

Hur jag skulle vilja att det ser ut:

export const TYPE = '@@FOLDER';
export enum FolderActionTypes = {
    REQUEST = `${TYPE}/REQUEST`;
    SUCCESS = `${TYPE}/SUCCESS`;
    ERROR = `${TYPE}/ERROR`;
    CHECK = `${TYPE}/CHECK`;
    UNCHECK = `${TYPE}/UNCHECK`;
    CLOSE = `${TYPE}/CLOSE`;
    OPEN = `${TYPE}/OPEN`;
};

Finns det något enkelt sätt att få det att fungera?

Svar #1

Du kan skapa en hjälpfunktion som accepterar en strängprefix och en lista över de åtgärder som ska skapas och prefixas.

Givet ett prefix och en array ska metoden skapa ett objekt med åtgärdstyper som nycklar och prefixade typer som värden.

Så givet PREFIX/ och ['a', 'b'] bör output vara { a: 'PREFIX/a', b: 'PREFIX/b' }

Detta kan enkelt göras med arraymetoden reduce.

Magin uppstår när du använder TS-typer - det kan härleda utdataobjektets nycklar från funktionsargumentet. Så som ett resultat kommer IDE:n att komplettera åtgärdstyperna åt dig :)

type ActionTypeMap<T extends string> = { [key in T ]: string };

const createActionTypesMap = <T extends string>(prefix: string, types: T[]): ActionTypeMap<T> =>
  types.reduce(
    (obj, key) => ({ 
      ...obj,
      [key]: `${prefix}${key}`
    }),
    {} as ActionTypeMap<T>
  );

const folderActionTypes = createActionTypesMap(
  '@FOLDER/',
  [
    'REQUEST',
    'SUCCESS',
    'ERROR',
    'CHECK',
    'UNCHECK',
    'CLOSE',
    'OPEN'
  ]
);