CODEWITHSUNDEEP
angulartypescript
DenCowboy
DenCowboy

Reputation: 15066

error TS2769: No overload matches this call

I'm building a small Angular app:

movie.service.ts looks like this

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable()
export class MovieService {
  constructor(private httpClient: HttpClient) {}

  getMovieList() {
    return this.httpClient.get(environment.gateway + '/movies');
  }

  addMovie(movie: Movie) {
    return this.httpClient.post(environment.gateway + '/movies', movie);
  }

  watchedMovie(movie: Movie) {
    return this.httpClient.put(environment.gateway + '/movies', movie);
  }

  deleteMovie(movie: Movie) {
    return this.httpClient.delete(environment.gateway + '/movies/' + movie.id);
  }
}

export class Movie {
  id: string;
  title: string;
  year: Number;
  watched: boolean;
}

Next I created movie.components.ts:

import { Component, OnInit } from '@angular/core';
import { MovieService, Movie } from '../movie.service';

@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css']
})
export class MovieComponent implements OnInit {

  activeMovies: Movie[];
  watchedMovies: Movie[];
  todoMessage: string;
  movieTitle: string;
  movieYear: number;

  constructor(private movieService: MovieService) { }

  ngOnInit() {
    this.getAll();
  }

  getAll() {
    this.movieService.getMovieList().subscribe((data: Movie[]) => {
      this.activeMovies = data.filter((a) => !a.watched);
      this.watchedMovies = data.filter((a) => a.watched);
    });
  }

  addMovie() {
    var newMovie : Movie = {
      title: this.movieTitle,
      id: '',
      year: this.movieYear,
      watched: false
    };

    this.movieService.addMovie(newMovie).subscribe(() => {
      this.getAll();
      this.movieTitle = '';
    });
  }

  watchedMovie(movie: Movie) {
    this.movieService.watchedMovie(movie).subscribe(() => {
      this.getAll();
    });
  }

  deleteMovie(movie: Movie) {
    this.movieService.deleteMovie(movie).subscribe(() => {
      this.getAll();
    })
  }
}

Now I have an error on this line:

this.movieService.getMovieList().subscribe((data: Movie[]) => {

The error:

✔ Compiled successfully.

    Error: src/app/movie/movie.component.ts:24:48 - error TS2769: No overload matches this call.
      Overload 1 of 5, '(observer?: NextObserver<Object> | ErrorObserver<Object> | CompletionObserver<Object> | undefined): Subscription', gave the following error.
        Argument of type '(data: Movie[]) => void' is not assignable to parameter of type 'NextObserver<Object> | ErrorObserver<Object> | CompletionObserver<Object> | undefined'.
          Property 'complete' is missing in type '(data: Movie[]) => void' but required in type 'CompletionObserver<Object>'.
      Overload 2 of 5, '(next?: ((value: Object) => void) | undefined, error?: ((error: any) => void) | undefined, complete?: (() => void) | undefined): Subscription', gave the following error.
        Argument of type '(data: Movie[]) => void' is not assignable to parameter of type '(value: Object) => void'.
          Types of parameters 'data' and 'value' are incompatible.
            The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
              Type 'Object' is missing the following properties from type 'Movie[]': length, pop, push, concat, and 26 more.

    24     this.movieService.getMovieList().subscribe((data: Movie[]) => {
                                                      ~~~~~~~~~~~~~~~~~~~~

      node_modules/rxjs/internal/types.d.ts:64:5
        64     complete: () => void;
               ~~~~~~~~
        'complete' is declared here.

What am I doing wrong or what am I missing here?

Upvotes: 2

Views: 3543

Answers (1)

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

By default, the type of HTTP Get request is Observable<Object>. You need to add a type to the API Calls like this.

getMovieList() {
    return this.httpClient.get<Movie[]>(environment.gateway + '/movies');
}

Upvotes: 6

Related Questions