title: Angular 2 - Typescript: TS2322: Type 'Subscription' is not assignable to type 'Observable<MouseEvent>'
body: <p>I am using the click-outside directive from this plunk --> <a href="http://embed.plnkr.co/v7BMUv/" rel="nofollow noreferrer">http://embed.plnkr.co/v7BMUv/</a></p>
  
  <p>My TS compiler is throwing the following errors:</p>
  
  <p>TS2322: Type 'Subscription' is not assignable to type 'Observable'.
    Property '_isScalar' is missing in type 'Subscription'.</p>
  
  <p>TS2339  Property 'unsubscribe' does not exist on type 'Observable'. </p>
  
  <p>My tsconfig.json:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "compileOnSave": false,
    "compilerOptions": {
      "target": "es6",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "suppressImplicitAnyIndexErrors": true,
      "noImplicitAny": false,
      "noEmitOnError": false
    },
    "exclude": [
      "node_modules",
      "wwwroot"
    ]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code causing error:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  ngOnInit() {
      this.globalClick = Observable
        .fromEvent(document, 'click')
        .delay(1)
        .do(() =&gt; {
          this.listening = true;
        }).subscribe((event:MouseEvent) =&gt; {
          this.onGlobalClick(event);
        });
    }
    </code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I overcome this error?</p>