枚举值中的字符串连接答案

【问题标题】：Strings concatenation in enum value枚举值中的字符串连接
【发布时间】：2019-11-13 15:38:52
【问题描述】：

我正在尝试将我的 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`;
};

有什么简单的方法可以让它工作吗？

【问题讨论】：

你为什么需要这样做？
枚举在这里似乎更自然，但我不想多次输入@@FOLDER，但保持动作域上下文对我来说很重要。

标签： reactjs typescript redux

【解决方案1】：

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

给定一个前缀和数组方法应该创建一个对象，其动作类型为键，前缀类型为值。

所以给定PREFIX/ 和['a', 'b']，输出应该是{ a: 'PREFIX/a', b: 'PREFIX/b' }

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

当你使用使用 TS 类型时，魔法就来了——它可以从函数参数中推断出输出对象的键。因此，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'
  ]
);

【讨论】：