title: Type checking with an array in Typescript
body: <p>I'm attempting to call the api = <a href="https://pokeapi.co/api/v2/type" rel="nofollow noreferrer">https://pokeapi.co/api/v2/type</a></p>
  <p>I wish to display the array in the data using the async pipe.</p>
  <p>I'm doing this via the html:</p>
  <pre><code>&lt;option *ngFor=&quot;let pokemonType of pokemonTypes$ | async&quot; [value]=&quot;pokemonType.url&quot;&gt;{{pokemonType.name | titlecase}}&lt;/option&gt;
  </code></pre>
  <p>I have a Filter interface for this:</p>
  <pre><code>export interface Filter {
    name: string;
    url: string;
  }
  </code></pre>
  <p>I have the following method in my httpService file:</p>
  <pre><code>getTypes(): Observable&lt;Filter[]&gt; {
          return this.http.get&lt;Filter[]&gt;(&quot;https://pokeapi.co/api/v2/type&quot;, { responseType: 'json', observe: 'response' }).pipe(map((res: any) =&gt; res.body.results));
      }
  </code></pre>
  <p>But when I try to set <code>pokemonTypes$</code> in my component:</p>
  <pre><code>pokemonTypes$: Filter[] = [];
  this.pokemonTypes$ = this.httpService.getTypes();
  </code></pre>
  <p>I get the following error:</p>
  <pre><code>Type 'Observable&lt;Filter[]&gt;' is missing the following properties from type 'Filter[]': length, pop, push, concat, and 27 more
  </code></pre>
  <p>Any ideas as to why?</p>