title: Overriding javascript Object toString() in a custom typescript class
body: <p>I've been sitting with a problem for the past days &amp; I can't seem to get a solution anywhere.
  <strong>Background</strong>:
  I have a typescript class defined as follows:</p>
  
  <pre><code>export class Client extends Person {
      claimNumber: string;
      policyNumber: string;
      address: string;
      insuranceCompany: Organisation = new Organisation();
  
      toString(): string {
          return this.policyNumber
              .concat(this.claimNumber);
      }
  }
  </code></pre>
  
  <p>The above is used as a model that drives an angular 5 template. In my component, I fetch (using angular 5 <strong><em>HttpClient</em></strong>) a list of clients from a remote api &amp; generate an html table rows. The LOC to generate the table rows is:</p>
  
  <pre><code>&lt;tr *ngFor="let client of clients | filter:searchString"&gt; ... &lt;/tr&gt;
  </code></pre>
  
  <p><strong><em>searchString</em></strong> above is property bound to a search input tag &amp; <strong><em>filter</em></strong> is a custom filter Pipe defined as follows:</p>
  
  <pre><code>export class FilterPipe implements PipeTransform {
      transform(items: Client[], term: string) {               
          if (term == undefined || term === '') return items;
          return items.filter(item =&gt;item.toString().toLocaleLowerCase().includes(term.toLocaleLowerCase()));
      }
  }
  </code></pre>
  
  <p><strong>Problem</strong>:
  When I inspect item.toString() in the filter pipe above, it returns [object Object] as opposed to a string made up of policyNumber, &amp; claimNumber.</p>
  
  <p><strong>Investigation</strong>:
  I investigated this issue as follows: I instantiated the Client class as follows:</p>
  
  <pre><code>let c = new Client();
  c.policyNumber = 'ababababa';
  c.claimNumber = 'aaaaaaa';
  console.log('client toString() is =&gt; ' + c.toString());
  </code></pre>
  
  <p>Interesting enough, the console.log above outputs : 'ababababaaaaaaaa'.</p>
  
  <p><strong>Question</strong>:
  What am I doing wrong that results in the item.toString() in the filter pipe return <strong><em>[object Object]</em></strong> whereas toString() on a class I instantiated returns the correct string?</p>