flowtype 无法返回 object 文字，因为 object 类型不兼容

Question

I have the following types:

export type Transaction = {
  amount: number,
  description: string
}

export type TransactionsForMonth = {
  month: number,
  year: number,
  transactions: Array<Transaction>
}

export type TransactionsGroupedByDay = Array<{
  date: string,
  transactionsForDay: Array<Transaction>
}>

export type TransactionsForMonthGroupedByDay = {
  month: number,
  year: number,
  transactionsForMonth: Array<TransactionsGroupedByDay>,
}

I've created a function that converts from TransactionsForMonth to TransactionsForMonthGroupedByDay , by reducing over the transactions and sorted them into days:

transactionsGroupedByDay ({ month, year, transactions }: TransactionsForMonth): TransactionsForMonthGroupedByDay {
  // transactions are already sorted in date order
  const transactionsGroupedByDay: TransactionsGroupedByDay = transactions.reduce((transactionsGroupedByDay, transaction) => {
    const thisDay = transactionsGroupedByDay.find(({ date }) => date === transaction.transactionDate)
    const transactionsThisDay = thisDay ? [...thisDay.transactionsForDay, transaction] : [transaction]
    return [
      ...transactionsGroupedByDay.filter(({ date }) => date !== transaction.transactionDate),
      {
        date: transaction.transactionDate,
        transactionsForDay: transactionsThisDay
      }
    ]
  }, [])
  return {
    month,
    year,
    transactionsForMonth: transactionsGroupedByDay
  }
}

When I run flow over this function, I get the following error:

Cannot return object literal because object type [1] is incompatible with TransactionsGroupedByDay [2] in array element
of property transactionsForMonth. [incompatible-return]

     src/api/services/TransactionService.js
     55│     return {
     56│       month,
     57│       year,
     58│       transactionsForMonth: transactionsGroupedByDay
     59│     }
     60│   }
     61│

     src/api/types.js
 [1] 35│ export type TransactionsGroupedByDay = Array<{
     36│   date: string,
     37│   transactionsForDay: Array<Transaction>
     38│ }>
       :
 [2] 43│   transactionsForMonth: Array<TransactionsGroupedByDay>,

I am new to flowtype and am wondering what this error means?

Answer 1

The error is basically saying, the function is supposed to return an object of a given type structure, but your return statement doesn't satisfy that requirement.

The reason for that is because in type TransactionsForMonthGroupedByDay you've declared that the property transactionsForMonth is an array of TransactionsGroupedByDay but the variable you actually pass into transactionsForMonth you've declared as const transactionsGroupedByDay: TransactionsGroupedByDay which is incompatible.

You can fix this by either fixing your type to accept a single TransactionsGroupedByDay or your variable declaration needs to return an array of TransactionsGroupedByDay .