枚举值中的字符串串联

Question

我试图将我的redux动作类型重构为枚举类型，但是问题是我想通过字符串连接生成值。

当前，我的动作如下所示（它不是对称的，因此静态生成器将无法工作）：

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`
};

我要如何使其看起来像这样：

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`;
};

有没有简单的方法可以使它起作用？

Answer 1

您可以创建一个辅助方法，该方法接受字符串前缀和应创建并带有前缀的操作列表。

鉴于前缀和数组方法应创建一个对象，该对象的操作类型为键，而前缀类型为值。

因此，给定PREFIX/和['a', 'b']，输出应为{ a: 'PREFIX/a', b: 'PREFIX/b' }

这可以简单地通过reduce数组方法完成。

当您使用TS类型时，魔术就来了-它可以从function参数推断输出对象键。 因此，结果IDE将为您自动完成操作类型：）

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'
  ]
);