Mapping incorrect values

Issue

I'm trying to map multiple observables into one single observable use RXJS CombineLatest. This was previously working when I was trying to map 6 observables but when adding an additional 5, the compiler seems to get confused about the mapping. This is the logic in question:

interface ReferenceData {
    observableOne: ArrOne[];
    observableTwo: ArrTwo[];
    observableThree: ArrThree[];
    observableFour: ArrFour[];
    observableFive: ArrFive[];
    observableSix: ArrSix[];
    observableSeven: ArrSeven[];
    observableEight: ArrEight[];
    observableNine: ArrNine[];
    observableTen: ArrTen[];
    observableEleven: ArrEleven[];
}

export class ReviewComponent extends BaseComponent implements OnInit, AfterViewInit {

 observableOne$: Observable<ArrOne[]>;
 observableTwo$: Observable<ArrTwo[]>;
 observableThree$: Observable<ArrThree[]>;
 observableFour$: Observable<ArrFour[]>;
 observableFive$: Observable<ArrFive[]>;
 observableSix$: Observable<ArrSix[]>;
 observableSeven$: Observable<ArrSeven[]>;
 observableEight$: Observable<ArrEight[]>;
 observableNine$: Observable<ArrNine[]>;
 observableTen$: Observable<ArrTen[]>;
 observableEleven$: Observable<ArrEleven[]>;

 referenceData$: Observable<ReferenceData>;

  ngOnInit(): void {
        this.getReferenceData();
        this.createSingleReferenceDataObservable();
    }

  getReferenceData() {
        this.observableOne$ = this.entityService.get('TestDataOne');
        this.observableTwo$ = this.entityService.get('TestDataTwo');
        this.observableThree$ = this.entityService.get('TestDataThree');
        this.observableFour$ = this.entityService.get('TestDataFour');
        this.observableFive$ = this.entityService.get('TestDataFive');
        this.observableSix$ = this.entityService.get('TestDataSix');
        this.observableSeven$ = this.entityService.get('TestDataSeven');
        this.observableEight$ = this.entityService.get('TestDataEight');
        this.observableNine$ = this.entityService.get('TestDataNine');
        this.observableTen$ = this.entityService.get('TestDataTen');
        this.observableEleven$ = this.entityService.get('TestDataEleven');
   }

    createSingleReferenceDataObservable() {
            this.referenceData$ = combineLatest([
                this.observableOne$, 
                this.observableTwo$, 
                this.observableThree$, 
                this.observableFour$, 
                this.observableFive$, 
                this.observableSix$, 
                this.observableSeven$, 
                this.observableEight$, 
                this.observableNine$, 
                this.observableTen$, 
                this.observableEleven$
            ])
            .pipe(
                map(([
                    ArrOne, 
                    ArrTwo, 
                    ArrThree, 
                    ArrFour, 
                    ArrFive, 
                    ArrSix, 
                    ArrSeven, 
                    ArrEight, 
                    ArrNine, 
                    ArrTen, 
                    ArrEleven
                ]) => {
                    return {
                        ArrOne, 
                        ArrTwo, 
                        ArrThree, 
                        ArrFour, 
                        ArrFive, 
                        ArrSix, 
                        ArrSeven, 
                        ArrEight, 
                        ArrNine, 
                        ArrTen, 
                        ArrEleven
                    }
                })
            );
        }
    
    }

The compiler is giving the following error:

Type 'Observable<{ ArrOne: ArrOne[]; ArrTwo: ArrOne[]; ArrThree: ArrOne[]; ArrFour: ArrOne[]; ArrFive: ArrOne[]; ArrSix: ArrOne[]; ArrSeven: ArrOne[]; ArrEight: ArrOne[]; ArrNine: ArrOne[]; ArrTen: ArrOne[]; ArrEleven: ArrOne[]; }>' is not assignable to type 'Observable'. Type '{ ArrOne: ArrOne[]; ArrTwo: ArrOne[]; ArrThree: ArrOne[]; ArrFour: ArrOne[]; ArrFive: ArrOne[]; ArrSix: ArrOne[]; ArrSeven: ArrOne[]; ArrEight: ArrOne[]; ArrNine: ArrOne[]; ArrTen: ArrOne[]; ArrEleven: ArrOne[]; }' is missing the following properties from type 'ReferenceData': observableOne, observableTwo, observableThree, observableFour, and 7 more.

It's strange because if I reduce the number of observables to six and delete the corresponding values from the ReferenceData interface, the compiler doesn't throw this error.

Any ideas?

Solution

RxJS combineLatest also has another overload where you can pass in an object, which would let you skip the map too:

        this.referenceData$ = combineLatest({
            ArrOne: this.observableOne$, 
            ArrTwo: this.observableTwo$, 
            ArrThree: this.observableThree$, 
            ArrFour: this.observableFour$, 
            ArrFive: this.observableFive$, 
            ArrSix: this.observableSix$, 
            ArrSeven: this.observableSeven$, 
            ArrEight: this.observableEight$, 
            ArrNine: this.observableNine$, 
            ArrTen: this.observableTen$, 
            ArrEleven: this.observableEleven$
        });

Maybe this one works better. It could be the array one doesn't work because TS might have a limit on how many values it can infer from a tuple.

Answered By - olivarra1