title: Angular Pipe and TypeScript Type Guard
body: <p>I read about type guards in typescript <a href="https://basarat.gitbooks.io/typescript/content/docs/types/typeGuard.html" rel="nofollow noreferrer">here</a> and <a href="https://www.typescriptlang.org/docs/handbook/advanced-types.html" rel="nofollow noreferrer">here</a>. But I still get compiler errors.</p>
  
  <blockquote>
    <p>Error:(21, 14) TS2349: Cannot invoke an expression whose type lacks a
    call signature. Type '{ (callbackfn: (value: Foo,
    index: number, array: Foo...' has no compatible call signatures.</p>
  </blockquote>
  
  <p>I got following classes:</p>
  
  <p><strong>Foo.ts</strong></p>
  
  <pre><code>export class Foo {
    expired: boolean;
  }
  </code></pre>
  
  <p><strong>Bar.ts</strong></p>
  
  <pre><code>export class Bar {
    foo: Foo;
  }
  </code></pre>
  
  <p><strong>MyPipe.ts</strong></p>
  
  <pre><code>import {Pipe, PipeTransform} from '@angular/core';
  
  @Pipe({
    name: 'myPipe'
  })
  export class MyPipe implements PipeTransform {
  
    transform(items: Foo[] | Bar[], isExpired: Boolean): Foo[] | Bar[] {
      if (!items) {
        return items;
      }
  
      if (items[0] instanceof Foo) {
        return items.filter((foo: Foo) =&gt; {
          return foo.expired == isExpired;
        });
      } else {
        return items.filter((bar: Bar) =&gt; {
          return bar.foo.expired == isExpired;
        });
      }
    }
  }
  </code></pre>
  
  <p><strong>The question is, how can I achieve the use of union binding for my parameter "items" and the type guard usage at the same time in my angular pipe using typescript?</strong> </p>