title: Typescript building URL with optional arguments
body: <p>I'm trying to build a URL to fetch data from a REST service, a valid url should look like this</p>
  
  <p><code>http://SITENAME/api/get_posts/?count=5&amp;page=1&amp;post_type=gallery</code></p>
  
  <p>and I have arguments like <strong>count</strong>, <strong>page</strong>, <strong>post_type</strong> and more..
  these are optional arguments and one or all could be null
  I tried the following code</p>
  
  <pre><code>var query = 'http://localhost/wptest/api/get_posts/?';
  fetchData(countIn: int, pageIn: int, typeIn: string, query: string) {
  
      if (this.countIn)   //if count not null, add count parameter.
          query = `${query}&amp;count=${this.countIn}`;
      if (this.pageIn)  
          query = `${query}&amp;page=${this.pageIn}`;
      if (this.typeIn)  
          query = `${query}&amp;post_type=${this.typeIn}`;
  
      return this.http.get(query).map(res =&gt; res.json());
  }
  </code></pre>
  
  <p>this ugly code is returning an invalid URL, when I go to chrome debugger => network tab I find:</p>
  
  <p><a href="https://i.stack.imgur.com/4omTW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4omTW.png" alt="enter image description here"></a></p>
  
  <p>however I don't get an exception, because somehow the url get fixed and send a new request with the valid url:</p>
  
  <p><a href="https://i.stack.imgur.com/D4fDM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D4fDM.png" alt="enter image description here"></a></p>
  
  <p>the problem is with the difference between <code>?count=5&amp;page=1</code> and <code>?&amp;count=5&amp;page=1</code></p>
  
  <p>this causing the tab spinner to be stuck and never ends.</p>
  
  <p><a href="https://i.stack.imgur.com/us9Md.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/us9Md.png" alt="enter image description here"></a></p>
  
  <p><strong>Q: what improvements can be done to the code in order to get a valid URL?</strong></p>