title: HttpClient type safety seems to ignore interface
body: <h1>TL;DR:</h1>
  
  <ol>
  <li>An angular interface was defined and bound to <code>HttpClient.get()</code> responses.</li>
  <li>Responses were mapped to a seemingly generic <code>object</code> type.</li>
  <li>Attributes that weren't defined on the interface like <code>id</code> and <code>title</code> were accessible on the response, as well as from .html called (eg. <code>&lt;p&gt;Title is:
  {{message?.title}}&lt;/p&gt;</code>.</li>
  <li>If an interface is a contract, shouldn't it be preventing some of this?</li>
  </ol>
  
  <hr>
  
  <p>New to Angular 4 from a Java background and stumbling on <code>HttpClient</code> type safety.  As <a href="https://angular.io/guide/http#typechecking-the-response" rel="nofollow noreferrer">this guide</a> points out, one can pass an interface to <code>http.get&lt;&gt;</code> to typecheck an HTTP response.  </p>
  
  <p>Consider a basic interface with a single <code>foo</code> field:</p>
  
  <pre><code>export interface FooInterface{
     foo: string;
  }
  </code></pre>
  
  <p>Following the aforementioned guide, this interface can easily be bound to a response:</p>
  
  <pre><code>export class RestComponent {
  
     message: FooInterface;
  
      http.get&lt;FooInterface&gt;('/api/items').subscribe(data =&gt; {
          this.message = data;
          console.log(this.message);
          console.log(typeof(this.message));
          console.log(this.message.foo);
      });
  </code></pre>
  
  <p>At this point, <strong>I hit a random API which does not have a <code>foo</code> field</strong>.  The actual API has two fields: <em>id</em> and <em>title</em>.  To my surprise, when I hit this API, the data object was still created:</p>
  
  <p><a href="https://i.stack.imgur.com/xW9g9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xW9g9.png" alt="enter image description here"></a></p>
  
  <p>Data is a generic object with fields <code>id</code> and <code>title</code>.  A call to <code>data.foo</code> return <code>undefined</code>.  </p>
  
  <p>Furthermore, while the interface prevents me from accessing these <em>id</em> and <em>title</em> fields directly, they are still available through calls like <code>data['id']</code>.  They can also be referenced in the HTML.  </p>
  
  <pre><code>&lt;h1&gt;
    id: {{message.id}}
    &lt;br&gt;
    title: {{message?.title}}
  &lt;/h1&gt;
  </code></pre>
  
  <p>And this gets rendered!  In fact, the only thing the interface seems to do is prevent me from doing something like:</p>
  
  <pre><code>`this.message.title`
  </code></pre>
  
  <p>That's cool I guess... but if these fields can be accessed via <code>this.message['title']</code> or reference in html files, then what's the point of the interface?</p>
  
  <p><a href="https://i.stack.imgur.com/Pw4cU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pw4cU.png" alt="enter image description here"></a></p>