封装一个字典函数

完整代码: https://codesandbox.io/s/awesome-margulis-q2xibv?file=/src/index.ts

潜在的问题

在我们平常写代码的时候，可能需要对一个相同的数据进行各种转换，以便满足业务的需求，例如下方社交账号的例子:

const social = {
  bilibili: '291833916',
  netease: '345345345',
  weibo: '436453345',
}

if (social[type]) {
  // do something
}

这样可能可以满足当时的需求，但如果哪天业务变更，要求加入社交账号的 icon，你可能会改成这样:

export const social = [
  {
    name: 'bilibili',
    account: '291833916',
    icon: 'bilibili.svg',
  },
  {
    name: 'netease',
    account: '345345345',
    icon: 'netease.svg',
  },
  {
    name: 'weibo',
    account: '436453345',
    icon: 'weibo.svg',
  },
  // ...
];

但这样改的话，你之前的代码可能会报错。当然你也可能会重新创建一个对象来避免错误，但这样代码就越来越臃肿了。

又如果你以后需要用到所有社交账号的名称或者账号（下方的格式），你可能又需要通过 map 来获取到。

['bilibili', 'netease', 'weibo']
['291833916', '345345345', '436453345']

这样的代码又臃肿又混乱，而且还容易出错。因此我们完全可以封装一个工具函数，将一份定义转换成多种格式，从而实现如下效果。

{
  SOCIAL_TYPE_KEYS: [ 'bilibili', 'netease', 'weibo' ],
  SOCIAL_TYPE_VALUES: [ '291833916', '345345345', '436453345' ],
  SOCIAL_TYPE_KV: { bilibili: '291833916', netease: '345345345', weibo: '436453345' },
  SOCIAL_TYPE_VK: {
    '291833916': 'bilibili',
    '345345345': 'netease',
    '436453345': 'weibo'
  },
  SOCIAL_TYPE_MAP_BY_KEY: {
    bilibili: { key: 'bilibili', value: '291833916', icon: 'bilibili.svg' },
    netease: { key: 'netease', value: '345345345', icon: 'netease.svg' },
    weibo: { key: 'weibo', value: '436453345', icon: 'weibo.svg' }
  },
  SOCIAL_TYPE_MAP_BY_VALUE: {
    '291833916': { key: 'bilibili', value: '291833916', icon: 'bilibili.svg' },
    '345345345': { key: 'netease', value: '345345345', icon: 'netease.svg' },
    '436453345': { key: 'weibo', value: '436453345', icon: 'weibo.svg' }
  },
  SOCIAL_TYPE_KEY_MAP: {
    bilibili: { key: 'bilibili', value: '291833916', icon: 'bilibili.svg' },
    netease: { key: 'netease', value: '345345345', icon: 'netease.svg' },
    weibo: { key: 'weibo', value: '436453345', icon: 'weibo.svg' }
  },
  SOCIAL_TYPE_MAP: { bilibili: '291833916', netease: '345345345', weibo: '436453345' },
  SOCIAL_TYPE_LIST: [
    { key: 'bilibili', value: '291833916', icon: 'bilibili.svg' },
    { key: 'netease', value: '345345345', icon: 'netease.svg' },
    { key: 'weibo', value: '436453345', icon: 'weibo.svg' }
  ]
}

函数编写

我们可以编写如下函数:

export const social = [
  {
    key: 'bilibili',
    value: '291833916',
    icon: 'bilibili.svg',
  },
  {
    key: 'netease',
    value: '345345345',
    icon: 'netease.svg',
  },
  {
    key: 'weibo',
    value: '436453345',
    icon: 'weibo.svg',
  },
  // ...
]

function defineConstants(list) {
  return {
    SOCIAL_KEYS: list.map((item) => item.key),
    SOCIAL_KV: list.reduce(
      (map, item) => ({
        ...map,
        [item.key]: item.value,
      }),
      {},
    ),
    ....
  }
}
const data = defineConstants(social)
console.log(data);

//{
//  SOCIAL_KEYS: [ 'bilibili', 'netease', 'weibo' ],
//  SOCIAL_KV: { bilibili: '291833916', netease: '345345345', weibo: '436453345' }
//}

大致思路就是这样，但为了代码的通用性我们应当再传递一个参数，来当我们的前缀。

function defineConstants(list, namespace) {
  const prefix = namespace ? `${namespace}_` : ''
  return {
    [`${prefix}KEYS`]: list.map((item) => item.key),
    [`${prefix}KV`]: list.reduce(
      (map, item) => ({
        ...map,
        [item.key]: item.value,
      }),
      {},
    ),
  }
}

但这样的函数是没有类型提示的，因此我们需要使用 TypeScript 来进行类型定义:

interface IBaseDef {
  key: PropertyKey;
  value: string | number;
}

function defineConstants<T extends IBaseDef[], N extends string>(
  defs: T,
  namespace?: N,
) {
  const prefix = namespace ? `${namespace}_` : '';
  return {
    [`${prefix}KEYS`]: defs.map((item) => item.key),
  };
}

这样传入的参数便有了类型，我们还需要对返回值进行定义:

type ToProperty<Property extends string, N extends string = ""> = N extends ""
  ? Property
  : `${N}_${Property}`;

export type MergeIntersection<A> = A extends infer T
  ? { [Key in keyof T]: T[Key] }
  : never;

type ToKeyValue<T> = T extends readonly [infer A, ...infer B]
  ? B["length"] extends 0
    ? ToSingleKeyValue<A>
    : MergeIntersection<ToSingleKeyValue<A> & ToKeyValue<B>>
  : [];

type ToKeys<T> = T extends readonly [infer A, ...infer B]
  ? A extends {
      readonly key: infer K;
    }
    ? B["length"] extends 0
      ? [K]
      : [K, ...ToKeys<B>]
    : never
  : [];

type ToSingleKeyValue<T> = T extends {
  readonly key: infer K;
  readonly value: infer V;
}
  ? K extends PropertyKey
    ? {
        readonly [Key in K]: V;
      }
    : never
  : never;

function defineConstants<T extends readonly IBaseDef[], N extends string = "">(
  defs: T,
  namespace?: N
) {
  const prefix = namespace ? `${namespace}_` : "";
  return {
    [`${prefix}KEYS`]: defs.map((item) => item.key),
    [`${prefix}KV`]: defs.reduce(
      (map, item) => ({
        ...map,
        [item.key]: item.value,
      }),
      {}
    ),
  } as MergeIntersection<{
    [Key in ToProperty<"KV", N>]: ToKeyValue<T>;
  }> & {
    [Key in ToProperty<"KEYS", N>]: ToKeys<T>;
  };
}

TypeScript 涉及的知识点过多，就不再叙述了，最终代码可以看开头 codesandbox。

参考

使用 TypeScript 定义业务字典