Why Doesn't This Bit of Code Work Without My Hack? - rxjs

Question

I have a situation where I'm making an API call to a Laravel back-end and eager-loading some data. The data is a collection of locations, each of the form:
location = {
id: ..
name: ...
...
docks: [
{
id: ...
name: ...
},
...
]
}
The end result of this epic should be to dispatch 2 actions, one with a list of the locations, and another with the list of all the associated docks
Taking it from the response to the api call, the following throws a Typescript error and won't compile:
.mergeMap(({ response }) => {
if (response.messages) {
return Observable.of(GetLocationsForReceiverFailedAction(response.messages))
}
const locations = response.locations.map((locn: any) => ({
id: locn.id,
receiver_id: locn.receiver_id,
name: locn.name,
address: locn.address,
city: locn.city,
state: locn.state,
zip: locn.zip
}))
const location$ = Observable.of(GetLocationsForReceiverSuccessAction(locations))
const docks: any[] = []
response.locations.forEach((locn: any) => {
locn.docks.forEach((dk: any) => {
docks.push(dk)
})
})
const docks$ = Observable.of(GetDocksForReceiverSuccessAction(docks))
return Observable.merge(location$, docks$)
})
.catch(() =>
Observable.of(
GetLocationsForReceiverFailedAction([
'Something went wrong trying to reach the server'
])
)
)
The error reads:
"Argument of type '({ response }: AjaxResponse) => Observable<{ type: ActionTypes; messages: string[]; }> | Observab...' is not assignable to parameter of type '(value: AjaxResponse, index: number) => ObservableInput<{ type: ActionTypes; messages: string[]; }>'."
If, however, I change the line:
return Observable.merge(location$, docks$)
to:
return Observable.merge(location$, Observable.empty(), docks$)
(ie, separating by 2 observables by an empty observable in the merge (or concat, which works the same way here), it compiles and runs.
What am I not understanding here?