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

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?

This error is related to static code analysis by TypeScript. Paste the code causing this error. — martin, Dec 21 '16 at 14:00

score 9 · Accepted Answer · answered Dec 21 '16 at 14:01

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.

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

1 Answers1

Linked