angular observable interface doesn't force any error when the response doesn't match

Question

In angular, I am defining an interface and use it with an observable in a service but it doesn't give any error when the upcoming response is different from the interface

Interface

export interface Quote {
    abc: string;
}

Service

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Quote } from './Quote';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable()
export class First {
    constructor(private http: HttpClient) { }
    getFirst() {
        return this.http.get<Quote>('https://programming-quotes-api.herokuapp.com/quotes/id/5a6ce86f2af929789500e824')

    }
    handleError(err: HttpErrorResponse) {
        console.log('here' + err.message);
        return Observable.throw(err.message + 'ssaa');
    }
}

component that uses the service

import { Component, Input, OnChanges, SimpleChanges, OnInit } from "@angular/core";
import { First } from './first.service';
import { Quote } from '@angular/compiler';
@Component({
  templateUrl: "Number.component.html",
  styleUrls: ["Number.component.css"],
  selector: "Number",
  providers: [First]
})
export class NumberComponent implements OnInit {
  constructor(private first: First) { }
  ngOnChanges(changes: SimpleChanges): void {
    for (let property in changes) {
      console.log(`${property} ${changes[property].currentValue} ${changes[property].previousValue}`)
    }
  }
  ngOnInit() {
    this.first.getFirst().subscribe((result) => console.log(result));

  }
  @Input('ab')
  numberIn: number = 1;

}

So my question is how everything is working without any error given that the upcoming response is in this shape

{_id: "5a6ce86f2af929789500e824", sr: "Jedan od mojih najproduktivnijih dana je bio kada sam bacio 1000 linija koda.", en: "One of my most productive days was throwing away 1,000 lines of code.", author: "Ken Thompson", source: "", …}

score 2 · Accepted Answer · answered Nov 19 '19 at 11:19

2

There are couple of reasons why you don't get any errors if the interface is not met.

The first one is that during the compile-time, the compiler doesn't know, and cannot know how exactly your API response will look like. You never interact with the API during that time.

As the browser doesn’t understand TypeScript, it has to be compiled down to JavaScript. As the JavaScript is a untyped language, all of your previously declared typings will be gone during that compilation. That also eliminates the possibility to throw the typing errors during the run-time.

It would be a cool feature to have, but for now you are responsible on keeping your API interfaces up to date.

answered Nov 19 '19 at 11:19

Dino

7,779
12
46
85

Then what is the benefit of using interfaces when doing http requests, as in the angular documentation they also use interfaces for the response of http request. – Amr Mohammed Nov 19 '19 at 11:28
1

The benefit is that you will have the typing for that request. You as the developer will know in front what the API response / request looks like. Not to mention it will keep your code clean and speed up the development process (Imagine you have 10 people on a project.). If you use any of the latest IDE's (Webstorm, VSC...), you can see the typings when ever you reference an object with some interface. – Dino Nov 19 '19 at 11:35

angular observable interface doesn't force any error when the response doesn't match

1 Answers1