vue3+ts 中将数组对象转换为对象

<template>
  <MyPullRefresh @clickRequest="">
    <template #default>
      <div>
        <div>{{ grouped }}</div>
        <van-button type="primary" @click="clickBtn">点击</van-button>
      </div>
    </template>
  </MyPullRefresh>
</template>

<script setup lang="ts">
import { useStore } from '@/store'
const store = useStore()

// 原始数据类型
interface dataType {
  type: string
  value: number
}

// 累加器的类型
interface Accum {
  [key: string]: dataType[]
}

let data = reactive(<dataType[]>[
  { type: 'A', value: 1 },
  { type: 'B', value: 2 },
  { type: 'A', value: 3 },
  { type: 'C', value: 4 },
  { type: 'B', value: 5 },
])

const grouped = computed(() => {
  return data.reduce((prev, curr) => {
    ;(prev[curr.type] = prev[curr.type] || []).push(curr)
    return prev
  }, {} as Accum)
})

const clickBtn = () => {
  console.log('====================================')
  console.log(grouped.value)
  console.log('====================================')
}
</script>

<style scoped></style>