error TS2322: Type 'Object' is not assignable to type 'Movie'? Angular 7

Question

I'm sorry to distract with my stupid question. I recently just study Angular 2+ and still do not understand everything. I looked at other answers to this question, but they did not help me. I have a function that returns a list and a separate item of the list.

Code from Service:

constructor(private http: HttpClient) { }
getMovies() {
 return this.http.get(this.baseUrl);
}
getMovie(id: number) {
return this.http.get(this.baseUrl + id);
}

The component that returns lists

 private movies = [];
 constructor(private movieService: MovieService) {}
 ngOnInit() {
  this.getMovies();
 }
private getMovies() {
 this.movieService.getMovies()
  .subscribe((response: any) => {
    this.movies = response.results;
  });
}

And my component which returns a list item:

movie = new Movie();

constructor(
 private movieService: MovieService,
 private activeRoute: ActivatedRoute) {
}

ngOnInit(): void {
 this.getMovie();
}

getMovie(): void {
 const id = +this.activeRoute.snapshot.paramMap.get('id');
  this.movieService.getMovie(id)
  .subscribe(movie => this.movie = movie);
}

Whatever I do and how I did not rewrite the code, I get the same error.

ERROR in src/app/page/movie-detail/movie-detail.component.ts(34,27): error TS2322: Type 'Object' is not assignable to type 'Movie'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? src/app/page/movie-detail/movie-detail.component.ts(34,27): error TS2322: Type 'Object' is not assignable to type 'Movie'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'page' is missing in type 'Object'.

How to correct this error, or at least where you can read about it, see how it is done? I have an API request which returns the following:

{"page": 1,
"results": [
{
  "poster_path": "/9O7gLzmreU0nGkIB6K3BsJbzvNv.jpg",
  "adult": false,
  "overview": "Framed in the 1940s for the...",
  "release_date": "1994-09-10",
  "genre_ids": [
    18,
    80
  ],
  "id": 278,
  "original_title": "The Shawshank Redemption",
  "original_language": "en",
  "title": "The Shawshank Redemption",
  "backdrop_path": "/xBKGJQsAIeweesB79KC89FpBrVr.jpg",
  "popularity": 5.446135,
  "vote_count": 5250,
  "video": false,
  "vote_average": 8.32
},
{
  "poster_path": "/lIv1QinFqz4dlp5U4lQ6HaiskOZ.jpg",
  "adult": false,
  "overview": "Under the direction o...",
  "release_date": "2014-10-10",
  "genre_ids": [
    18,
    10402
  ],
  "id": 244786,
  "original_title": "Whiplash",
  "original_language": "en",
  "title": "Whiplash",
  "backdrop_path": "/6bbZ6XyvgfjhQwbplnUh1LSj1ky.jpg",
  "popularity": 9.001948,
  "vote_count": 2072,
  "video": false,
  "vote_average": 8.28
}
],
"dates": {
"maximum": "2016-09-01",
"minimum": "2016-07-21"
},
"total_pages": 33,
"total_results": 649
}

I think I have error in service, because I do not get the pages when I display the list and a separate item of the list. But I did not find how to do it differently, or these options are no longer working.

either change return this.http.get(this.baseUrl + id); to strongly typed return this.http.get<Movie>(this.baseUrl + id); in getMovie method of your movieservice.You need to import Movie class to your service for this. Or you can typecast the response object movie as .subscribe(movie => this.movie = <Movie>movie); in your getmovie() method of component. — Niladri
Typescript is showing this error because you are trying to assign this.movie which is of type Movie to default Object type. — Niladri
The API response you have returned appears to be for the getMovies function, not getMovie. You will likely want to parse this into a different structure, or at the very least, put results directly into a Movie[] array. — Ian MacDonald

Alann Alann · Accepted Answer · 2018-11-19T15:41:08

you can either specify your type in your get function

return this.http.get<Movie>(this.baseUrl);

Or specify it in your function

getMovies(): Observable<Movie> {
 return this.http.get(this.baseUrl);
}

Or do both

 getMovies(): Observable<Movie> {
     return this.http.get<Movie>(this.baseUrl);
}

error TS2322: Type 'Object' is not assignable to type 'Movie'? Angular 7

2 Answers