Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fix TypeScript Autocomplete for RxJS Operators in WebStorm

I'm using WebStorm for an Angular 2 project.

I code in TypeScript and in one of my components I use Observable :

import { Observable } from "rxjs/Rx";
import 'rxjs/Rx';

@Component({...})
export class SearchComponent {

  @ViewChild('input') input: ElementRef;

  ngAfterViewInit() {
    let inputElement = this.input.nativeElement;
    let keyups = Observable.fromEvent(inputElement, 'keyup');  // <-- WebStorm error
    keyups.subscribe(data => console.log(data));
  }
}

This code does work (something is logged to the console every time I type something in the input field), but WebStorm complains about the fromEvent method ("Unresolved function or method").

Also, if I trigger autocomplete on the Observable class, most of the operators listed in the RxJS documentation are missing. For instance, typing Observable.fr should produce a list of from, fromCallback, fromEvent, fromPromise... but WebStorm only suggests one method (withLatestFrom).

How can I get proper autocomplete/TypeScript support for observables in WebStorm?

I have tried different ways to import Observable, I have tried the suggestions in this article (i.e. adding "files": ["node_modules/rxjs/Rx.KitchenSink.d.ts"] to tsconfig.json), but nothing worked.

like image 491
AngularChef Avatar asked Jun 15 '16 08:06

AngularChef


3 Answers

I had the same issue, even with WebStorm 2016.2 (final). The solution that worked for me was in a comment to another answer, so to make it more visible, here it is as a proper answer:

Delete the .idea folder.

I did this, and then restarted WebStorm. Then all the rxjs definitions worked.

like image 94
Michael Bromley Avatar answered Nov 04 '22 14:11

Michael Bromley


I'm using WebStorm 2016 and this helped me with my angular 2 + ionic 2 project:

WebStorm -> Preferences -> Languages & Frameworks -> JavaScript -> Libraries 
-> [Ensure 'ECMAScript 6' and 'your-progect/node_modules' are checked]
.then Apply -> Save -> Restart WebStorm
like image 28
Serhii Harbovskyi Avatar answered Nov 04 '22 13:11

Serhii Harbovskyi


Turns out it was a problem with PhpStorm.

I reached out to Jetbrains support, and they suggested upgrading to version 2016.2 EAP (Early Access Program), which does fix the problem.

like image 2
AngularChef Avatar answered Nov 04 '22 14:11

AngularChef