如何使用減少 typescript 來填充類型化數組？

Question

我有一個對象數組，其中填充了由reduce loop生成的對象。 這些對象已經有一個類型，因此我需要reduce生成的object具有相同的類型，但我正在努力處理reduce的初始值，因為它是一個空的object。

如何將類型設置為初始 object 而不會收到錯誤提示 object 缺少屬性？

接口和基值：

const productFormLocal = [
   {
      field: 'id',
      config: {
         elementType: false,
         value: '',
         validation: {},
         valid: true,
         touched: false
      }
   },
   {
      field: 'nome',
      config: {
         elementType: 'input',
         elementConfig: {
            type: 'text',
            placeholder: 'Nome do Produto',
            name: 'nome',
         },
         label: 'Nome do Produto',
         value: '',
         validation: {
            required: true,
         },
         valid: false,
         touched: false
      }
   }
]    

interface ProductsList {
   id: number
   nome: string
   qtde: number
   valor: number
   valorTotal: number
}

const productsList: ProductsList[] = []

例如，如果我這樣做，我的 reduce 工作正常，但我無法將生成的對象推送到數組：

const data: Record<string, any> = {}

const productValues = productFormLocal.reduce((obj, item) => (
  obj[item.field] = item.config.value, obj
), data)

productsList.push(productValues)

如果我這樣做，我會收到一條錯誤消息，指出data缺少ProductList屬性：

const data: ProductsList = {}

const productValues = productFormLocal.reduce((obj, item) => (
  obj[item.field] = item.config.value, obj
), data)

productsList.push(productValues)

我怎么能解決這個問題？ 我看了很多，但我找不到正確的方法。

我知道我可以將ProductsList的所有屬性設置為可選，但這似乎不是最好的方法。

Answer 1

設置 reduce 泛型類型，它將鍵入默認值以及 reducer function 返回類型。

const productValues = productFormLocal.reduce<Record<string, any>>((acc, item) => ({
  ...acc,
  [item.field]: item.config.value
}), {})