Angular 2 - Typescript: TS2322: Type 'Subscription' is not assignable to type 'Observable<MouseEvent>'

Question

I am using the click-outside directive from this plunk --> http://embed.plnkr.co/v7BMUv/

My TS compiler is throwing the following errors:

TS2322: Type 'Subscription' is not assignable to type 'Observable'. Property '_isScalar' is missing in type 'Subscription'.

TS2339 Property 'unsubscribe' does not exist on type 'Observable'.

My tsconfig.json:

{
  "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"
  ]
}

The code causing error:

  ngOnInit() {
    this.globalClick = Observable
      .fromEvent(document, 'click')
      .delay(1)
      .do(() => {
        this.listening = true;
      }).subscribe((event:MouseEvent) => {
        this.onGlobalClick(event);
      });
  }
  

How do I overcome this error?

Answer 1

The error is in click-outside.directive.ts. Observable.subscribe returns a Subscription (in ngOnInit), not another Observable. Thus, the type of private globalClick should be Subscription.

It works when types are removed, and as plunker doesn't show type errors it worked, but when compiling with tsc it will error out as you're trying to assign a Subscription object to an Observable.