从 Typescript 中的重复值创建键数组答案

【问题标题】：Create key array from duplicate value in Typescript从 Typescript 中的重复值创建键数组
【发布时间】：2021-07-23 08:36:29
【问题描述】：

我有一个数组形式：

  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },

我想将其转换为 map (key, value) ，其中 key 的值为 itemFamily，所以它看起来像这样：

{ Asset:  
   [ { itemTitle: 'value example', 
       itemType: 'value example', 
       itemDescription: 'value example', 
       itemFamily: 'Asset' }, 
     { itemTitle: 'value example', 
       itemType: 'value example', 
       itemDescription: 'value example', 
       itemFamily: 'Asset' } ], 
  Periodic:  
   [ { itemTitle: 'value example', 
       itemType: 'value example', 
       itemDescription: 'value example', 
       itemFamily: 'Periodic' }, 
     { itemTitle: 'value example', 
       itemType: 'value example', 
       itemDescription: 'value example', 
       itemFamily: 'Periodic' } ] 
}

你知道怎么做吗？

【问题讨论】：

标签： javascript arrays typescript

【解决方案1】：

您可以使用以下代码：

yourArray.reduce((accumulator, element) => {
  if (!accumulator[element.itemFamily]) accumulator[element.itemFamily] = []
  accumulator[element.itemFamily].push(element)
  return accumulator
}, {})

【讨论】：

谢谢，但是我的代码中有一条错误消息。 ``` const familyItems = categoryItems.reduce((acc, element) => { if (!acc[element.itemFamily]) acc[element.itemFamily] = [] acc[element.itemFamily].push(element) return acc }, {}) ``` TS7053：元素隐式具有“any”类型，因为“any”类型的表达式不能用于索引类型“{}”。
@rmarquet21 这是一个打字稿错误。您必须为作为reduce 的第二个参数传递的对象声明一个类型（这个github.com/microsoft/TypeScript/issues/35859 可能会有所帮助，请阅读）。
没有自动声明类型？我不知道如何解决这个问题:(
看看@captain-yossarian 的回答，它会对你有所帮助。

【解决方案2】：

首先，你需要使非法状态无法表示。

这意味着Asset 属性应该只包含Asst 系列的元素。见type Result

type Family = 'Asset' | 'Periodic';

interface Item {
  itemTitle: string,
  itemType: string,
  itemDescription: string,
  itemFamily: string,
}
const data: Item[] = [
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Asset',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },
  {
    itemTitle: 'value example',
    itemType: 'value example',
    itemDescription: 'value example',
    itemFamily: 'Periodic',
  },
]

type Result = Record<string, Item[]>

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

const handleProperty = (acc: Record<string, Item[]>, elem: Item) =>
  hasProperty(acc, elem.itemFamily) ? [...acc[elem.itemFamily], elem] : [elem]

const builder = (data: Item[]) =>
  data.reduce<Result>((acc, elem) => ({
    ...acc,
    [elem.itemFamily]: handleProperty(acc, elem)
  }), {})

const result = builder(data)

Playground

【讨论】：

谢谢！但是 Asset 和 Periodic 仍然可以是我们不知道的其他值，目标是动态完成它而不知道从一开始就知道键的名称

【解决方案3】：

reduce 的解决方案如下：

let r3 = myArr.reduce((r, a) => {
    r[a.itemFamily] = [...(r[a.itemFamily] || []), a];
    return r;
  }, {});

【讨论】：