The error message TS2322 occurs due to the inability to assign the type 'Observable<{}[]>' to 'Observable<Archive[][]>'

While upgrading from Angular 5.2.11 to 7.3.9, I encountered a types issue that was not present in the previous version of Angular.

After fixing the import for forkJoin, the code snippet below now throws an error:

ERROR in src/app/reports/report-measurements-options/report-measurements-options.component.ts(377,5): error TS2322: Type 'Observable<{}[]>' is not assignable to type 'Observable<Archive[][]>'.
  Type '{}[]' is not assignable to type 'Archive[][]'.
    Type '{}' is missing properties like length, pop, push, and more from type 'Archive[]'.

getArchives(): Observable<Archive[][]> {
    if ((this.startDate) > (this.endDate)) {
      let temp = this.startDate;
      this.startDate = this.endDate;
      this.endDate = temp;
    }

    let observableBatch: any[] = [];

    this.selectedBins.forEach(bin => {
      const definition = bin.definitions.find(d => d.type === this.selectedReadingType);

      bin.selectedDefinition = definition;
      bin.definitionUnits = definition.units;

      observableBatch.push(this.archiveService.listArchives(definition.id, this.startDate, this.endDate)
        .map((res: Archive[]) => res));
    });

    return forkJoin(observableBatch);
  }

I anticipate that the method should return the correct type just as it did prior to the update.

angulartypescript

Answer №1

It appears that the issue lies within this particular instruction

this.archiveService.listArchives(definition.id, this.startDate, this.endDate)
        .map((res: Archive[]) => res)

You may eliminate .map((res: Archive[]) => res) as you are returning the same object. In the event that you upgraded from angular 5 to 7 and rxjs was also updated, you can resolve this by using pipe with map as shown below:

this.archiveService.listArchives(definition.id, this.startDate, this.endDate)
            .pipe(map((res: Archive[]) => res))

Answer №2

In order to fix the issue, I had to make some changes to the method by removing the type declaration and using pipe. After making these adjustments, the code now compiles without any errors:

getArchives() /*removed type*/{
    if ((this.startDate) > (this.endDate)) {
      let temp = this.startDate;
      this.startDate = this.endDate;
      this.endDate = temp;
    }

    let observableBatch: any[] = [];

    this.selectedBins.forEach(bin => {
      const definition = bin.definitions.find(d => d.type === this.selectedReadingType);

      bin.selectedDefinition = definition;
      bin.definitionUnits = definition.units;

      observableBatch.push(this.archiveService.listArchives(definition.id, this.startDate, this.endDate)
        .pipe(map((res: Archive[]) => res)));
    });

    return forkJoin(observableBatch);
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Connect the backend with the frontend using React.js

I am currently faced with the task of developing the front end for an existing backend project. The original front end was built using Angular, but I am opting to recreate it using React. However, I am unsure about how to establish a connection between t ...

reactjsangulartoken

What is the best way to confirm the invocation of super in sinonjs?

My JavaScript/TypeScript class (AAA) extends another class (BBB). The API of class BBB is stable, but the implementation is not yet finalized. I just want to unit test some functions in class AAA. However, I'm facing an issue in creating an instance o ...

javascripttypescriptunit-testingclasssinon

Tribal Code Typescript Compiler

Typescript is a great alternative to Javascript in my opinion, but it bothers me that it requires node.js as a dependency. Additionally, I find it frustrating that there seems to be only one compiler available for this language, and it's self-hosted. ...

javascriptc++cnode.jstypescript

Is it possible to capture and generate an AxiosPromise inside a function?

I am looking to make a change in a function that currently returns an AxiosPromise. Here is the existing code: example(){ return api.get(url); } The api.get call returns an object of type AxiosPromise<any>. I would like to modify this function so ...

javascripttypescriptaxios

TypeScript Redux expands the type system

Currently, I am working with Redux along with React and Typescript. I have been following the official Redux documentation's "Usage with TypeScript" section available at https://redux.js.org/usage/usage-with-typescript. export type AppDispatch = type ...

reactjstypescriptreduxrtk-query

Intellij IDEA does not offer auto-completion for TypeScript .d.ts definitions when a function with a callback parameter is used

I've been working on setting up .d.ts definitions for a JavaScript project in order to enable auto-completion in Intellij IDEA. Here is an example of the JavaScript code I'm currently defining: var testObj = { tests: function (it) { ...

javascripttypescriptintellij-ideajsdoc

The `sonarqube-scanner@^4.0.0` does not produce a non-zero exit code when a Quality Gate failure occurs

Latest SonarQube: Developer Edition v10.5.1 (90531) Sonarqube-scanner version: 4.0.0 or 4.0.1 Utilized npm package: https://www.npmjs.com/package/sonarqube-scanner Node.js version: 20.14 Upon executing the following command: npx sonarqube-scanner@^4.0.0 - ...

node.jstypescriptsonarqubesonarqube-scan

Cross-component communication in Angular

I'm currently developing a web-based application using angular version 6. Within my application, there is a component that contains another component as its child. In the parent component, there is a specific function that I would like to invoke when ...

javascriptangulartypescriptcomponents

Steps for hosting Angular on Firebase:1. Set up a Firebase project

I am having trouble getting my Angular app to display properly on Firebase after deployment. Instead of showing my app, it is displaying the default index.html generated by Firebase. How can I fix this? This is what my firebase.json file looks like: { ...

angularfirebasefirebase-hosting

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

Attempting to utilize Spectron for testing my Electron application has been challenging. According to the documentation, in order to locate the nth child element, you can either use an nth-child selector or retrieve all children that match a selector using ...

javascripttypescriptelectronwebdriver-iospectron

Steps to Deploying a Typescript Express Application on Azure App Services

As I work on deploying a Typescript express app in Azure app services, I encountered an error message when trying to access my app's URL: You do not have permission to view this directory or page. I followed the same deployment process that I typica ...

node.jstypescriptexpressazure-web-app-service

Having trouble utilizing yarn to import Mapbox into TypeScript

My process involves using the command: yarn add --dev @types/mapbox-gl @types/geojson This successfully adds mapbox and geojson to my project. I can see them when attempting to import mapboxgl. Next, I create something similar to this: import * as L ...

typescriptmapbox

Node.js does not allow the extension of the Promise object due to the absence of a base constructor with the required number of type

I'm trying to enhance the Promise object using this code snippet: class MyPromise extends Promise { constructor(executor) { super((resolve, reject) => { return executor(resolve, reject); }); } } But I keep encou ...

node.jstypescriptpromise

What is the method for updating a property in an object of a Typescript class?

I am trying to work with a Fruit class: export class Fruit { constructor(public id: number, public name: string) {} public changeName(_name: string): void { console.log('changing name') this.name = _name } } My imple ...

javascriptreactjstypescriptes6-classreact-typescript

Only pass props to `Image` if they have a defined value

As I construct a blog platform using MDX and NextJS, I am creating a custom image component that utilizes the Next <Image> component. However, I've encountered a minor issue for which I have been unable to find a solution. The main question is: ...

reactjstypescriptnext.jsmdxjs

The Angular single-page application fails to refresh when being executed via Visual Studio 2017 Community

I have encountered a problem with my angular 6 app not refreshing when running through Visual Studio 2017. The project consists of multiple projects, including a .NET Core 2 WebAPI and the angular app in question. Even after setting the startup to only be ...

angularvisual-studio

The element is assumed to have an 'any' type due to the index expression not being of type 'number'. - Error in Index Signature

I've recently started using TypeScript and encountered the following issue: Element implicitly has an 'any' type because index expression is not of type 'number' This error message appears on this line --> const { status, msg ...

typescriptexpressbackend

Challenges in mimicking the search functionality of Angular's Tour of Heroes due to issues with Observers

I'm facing an issue while trying to incorporate a search bar with autocomplete suggestions in Angular 9. It worked perfectly in the tour of heroes tutorial, but when I attempt to replicate it, the searchTerms pipe seems to be inactive (the service is ...

typescriptrxjsangular9

Encountering "Angular Reactive forms - FormArray - Unable to locate control with specified path" error upon initial loading

Encountering some Cannot find control with path errors while attempting to utilize a basic Reactive Form and FormArray. Component.ts ngOnInit() { this.newForm = this.fb.group({ currencyExchangex: this.fb.array( [this.fb.group({ rateNumeri ...

angular

Error 2300 in Vetur: Identical identifier found for '(Missing)'

Recently, I've been encountering a strange issue with Vetur in my typescript nuxt.js project. Every component, whether it's just an empty line or contains code, displays an error message on the first line. I can't pinpoint when this problem ...

javascripttypescriptvue.jsnuxt.jsvetur