Assignment of type 'Object' is incompatible with type in new HttpClient / HttpGetModule implementation within Angular

Question

Assignment of type 'Object' is incompatible with type in new HttpClient / HttpGetModule implementation within Angular

After following the angular tutorial, I decided to test out the new httpClient.Get method. However, it seems that no matter what, it always returns results of type Object.

// HttpClient 
getHeroes2 () {
   this.http.get<Hero[]>(this.heroesUrl) 
     .subscribe((data: Hero[]) => this.takeHeros2(data)); 
}

takeHeros2(heroes: Hero[]) {
  console.log(heroes)
}

Upon inspecting the parameter heroes in the method takeHeros2(), I found that it is of type Object[] instead of Hero[]. The result of heroes in debugger can be seen here.

This issue is puzzling to me and I am struggling to understand why it is happening.

angular typescript

Answer 1

Answer №1

When you use <Hero[]>, you're basically informing the compiler:

Hey, when I call this method, it will give me an array containing objects. And these objects will follow the same structure as the Hero class

The essence here is 'objects with the same structure'. This means that they will remain as generic objects. If you want your objects to be specifically of type Hero, you can do the following:

getHeroes2() {
   this.http.get<Hero[]>(this.heroesUrl) 
     .map(hero => Object.assign(new Hero(), hero))
     .subscribe((data: Hero[]) => this.takeHeros2(data)); 
}

This utilizes the map operator from rxjs, which creates a new Hero object for each object in the result array and returns it

Answer 2

When you use <Hero[]>, you're basically informing the compiler:

Hey, when I call this method, it will give me an array containing objects. And these objects will follow the same structure as the Hero class

The essence here is 'objects with the same structure'. This means that they will remain as generic objects. If you want your objects to be specifically of type Hero, you can do the following:

getHeroes2() {
   this.http.get<Hero[]>(this.heroesUrl) 
     .map(hero => Object.assign(new Hero(), hero))
     .subscribe((data: Hero[]) => this.takeHeros2(data)); 
}

This utilizes the map operator from rxjs, which creates a new Hero object for each object in the result array and returns it

Assignment of type 'Object' is incompatible with type in new HttpClient / HttpGetModule implementation within Angular

Answer №1

Similar questions

After subscribing, creating the form results in receiving an error message that says "formgroup instance expected."

Transferring functionality from a child component to a parent component

Is it possible to locate a Typescript class only when there are no references to its properties?

Why does Typeorm consistently encounter insertion failures when attempting to insert into two tables, and why does Math.random() continuously return the same number?

Exploring the distinction between "() => void" and "() => {}" in programming

Encountering an issue while attempting to input a URL into the Iframe Src in Angular 2

Encountering difficulties during the installation of Angular 6.0.8

When working with TypeScript for initial data, you have the choice between using interface types or class types. Which approach is the

Issue encountered when attempting to develop a countdown timer using Typescript

Exploring the concept of ngForm and ngModel within template-driven forms in Angular

Best practices for handling HTTP requests in Angular 5

Should I use Object.assign or define class properties?

Does Vue.js have its own version of Angular's named templates feature?

React is unable to identify the property that was passed to a styled-component in Material UI

Exploring Date Comparison in Angular 2

Issue with mapping HttpClient subscribe method in Angular 5

The Karma testing feature in Angular Quickstart encounters issues right from the start

Switching Angular repository to download node_modules dependencies from internal company source: A step-by-step guide

Angular 6 is throwing an error stating that the 'publish' property is not found on the type Observable<string>

Can you explain the distinction between App: React.FunctionComponent and App = (): React.FunctionComponent()?