0

I wanted to understand some basics of Angular and HttpClient. My code is working but I don't understand how. I checked these two links:

  1. How to correctly subscribe Angular HttpClient Observable?
  2. How to declare Return Types for Functions in TypeScript

I've watched this video on YouTube:

  1. observable and subscribe in Angular 8 | Angular 8 Tutorial in Hindi

I learnt that the syntax of HttpClient's GET method is: get(url: string, options: {...}): Observable<any>

So I did as I was told to do in the video. Here is my case 1:

UserService

...
export class UserService {
  constructor(private _http: HttpClient) { }
  getAllUsers() {
    return this._http.get("https://jsonplaceholder.typicode.com/users"):Observable<any>;
  }
}

Why VSCode is complaining:

Value of type 'typeof Observable' is not callable. Did you mean to include 'new'?

In fact my code works perfectly If I don't even specify Observable at all. Here is case 2:

...
export class UserService {
  constructor(private _http: HttpClient) { }
  getAllUsers() {
    return this._http.get("https://jsonplaceholder.typicode.com/users");
  }
}

And here's my component(for both the cases):

UserList

  users=[];

  constructor(private userService: UserService) { }

  ngOnInit() {  
    this.fetchAllUsers();  
  }

  fetchAllUsers() {
    this.userService.getAllEUsers().subscribe(
      res => {
        this.users.push(res)
      }
    );    
  }

Please point out my mistakes in both cases. I think I'm violating Angular rules somewhere.

PS: Screenshot of the youtube tutorial:

enter image description here

Tanzeel
  • 4,174
  • 13
  • 57
  • 110
  • 1
    `return this._http.get("..."):Observable;` -- this is an invalid syntax. Can you check again what's the actual code? – 31piy Dec 24 '20 at 07:27
  • @31piy, this tutorial doesn't contains the code. But I've added the screenshot. – Tanzeel Dec 24 '20 at 07:40

1 Answers1

4

The following line is an invalid statement in your code:

return this._http.get("https://jsonplaceholder.typicode.com/users"):Observable<any>;

I think you are trying to specify a return value for the method here, in which case, you need to change the method declaration like this:

getAllUsers(): Observable<any> {
  return this._http.get("https://jsonplaceholder.typicode.com/users");
}

You might want to take a TypeScript refresher course here.

31piy
  • 23,323
  • 6
  • 47
  • 67
  • I've added the screenshot also in the question. Just now I added. I was told to follow the same. – Tanzeel Dec 24 '20 at 07:38
  • And how it works when i dont specify Observable at all anywhere ? – Tanzeel Dec 24 '20 at 07:41
  • 2
    You'll need to understand the difference between declaration and implementation. The screenshot describes the method declaration. Also, the default return type of http.get is `Observable`, so it doesn't make any difference when you don't add a return type to your method. – 31piy Dec 24 '20 at 07:45
  • @Tanzeel -- I've added a TS doc link in my answer. You may want to learn more about TS first before jumping on to Angular. – 31piy Dec 24 '20 at 07:47
  • This was very helpful indeed. – Tanzeel Dec 24 '20 at 07:58