Subscribe() returns "complete: () => void; 'complete' is declared here. What does this mean?

user_16002233 0
Viewed 1196

I am following a tutorial, and through check and recheck, I am 100% sure my code is exactly equal to the one the professor is using. We are making a simple Single Page Application in Angular, which, presumably, involves typescript.

I'm pretty sure all external classes are correctly written, and VS Code points no other error in the written code except for the following script in my file feed.component.ts The ideia is to define an attribute listPost (of type array and class Post[]) which recieves the list of post objects contained in an adress specified in the class PostService.

To be more precise, the problem I'm dealing with is in the function findPosts(), for which it says there is an error pointed as "complete () => void" (which I have no idea what means). One thing is disturbing me is that this is written EXACTLY as in the professor files. The only one difference is that he's using Typescript v. 3.9.2 whilst I'm with v. 4.3.2. I suspect that might be an issue, since for what I've searched typescript has a lot of issues when interpreting different versions.

import { Component, OnInit } from '@angular/core';
import { PostService } from '../service/post.service';
import { Post } from '../model/Post'

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

  private listPost: Post[];

  constructor(private postService: PostService) {
    this.listPost = []
   }

  ngOnInit(): void {
    this.findPosts()
  }

  findPosts() {
    this.postService.getPosts()
                    .subscribe( 
                      (data: Post[]) => {this.listPost = data} );
  }

}

angular typescript
2 Answers

I am the author of this question and I will answer here how I solved it, so that this might help someone in the future.

Okay so, I think this is -- somehow, and I don't know how -- related to Typescript versions.

First of all, this is how the tutorial code functioned using Typescript 3.9:

export class FeedComponent implements OnInit {
listPost: Post[];

constructor(private postService) { }
ngOnInit(): void {
this.postService.getPosts().subscribe(
      (data: Post[]) => this.listPost = data )}}

Okay so, the only one difference that was necessary to implement in this code was already implemented when I made the question, which is this:

export class FeedComponent implements OnInit {

  listPost: Post[];
  constructor(private postService: PostService) {
    this.listPost = []} // <--- THIS WAS INCLUDED
  ngOnInit(): void {
    this.postService.getPosts().subscribe(
      (data: Post[]) => this.listPost = data )}}

So, it would seem that in Typescript 4, now you MUST initialize variables in the constructor. That is was the first source of error. But why was it still returning Error? The answer was in post.services file. When I made the question, the post.services was written like this:

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

@Injectable({
  providedIn: 'root'
})

export class PostService {

  constructor(private http: HttpClient) { }

  public getPosts() {
    return this.http.get('http://localhost:3000/posts')
  }
}

It had to be rewritten like this:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs'; // <--- THIS WAS INCLUDED
import { Post } from '../model/Post'; // <--- THIS WAS INCLUDED

@Injectable({
  providedIn: 'root'
})

export class PostService {

  constructor(private http: HttpClient) { }

  public getPosts(): Observable<Post[]> { // <--- THIS WAS MODIFIED
    return this.http.get<Post[]>('http://localhost:3000/posts')
  }
}

I really don't know why this is necessary. I figured it out by trial and error, looking at other contexts that returned the same error. It seems that specifying the type of the return from the get method as Observable has become something necessary. I saw the syntax was like that, and thus I figured out I also had to import my module Post and this module Observable into the services file.

Finally, in the Post module I also had to initialize the JSON attributes in the constructor.

user_160022330

Maybe this is correct

async findPosts() {
    await this.postService.getPosts()
        .subscribe((data: Post[]) => this.listPost = data);
}
user_153143530
Related