TSLint annoying message

Question

On my angular's component i'm using two methods from RxJs, debounceTime() and distinctUntilChanged()

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

@Component({
  selector: 'app-form4th',
  templateUrl: './form4th.component.html',
})
export class Form4thComponent implements OnInit {
  searchField: FormControl;
  searches: string[] = [];

  constructor() { }

  ngOnInit() {
    this.searchField = new FormControl();
    this.searchField
        .valueChanges
        .debounceTime(400)
        .distinctUntilChanged()
        .subscribe(term => {
          this.searches.push(term);
        });
  }
}

App works fine , no error or even no warning message when doing (build) ie ng serve , and running the app on browser works as expected and no error message or warning too on browser console.

However , I have this weird TSLint message on my vscode saying:

[ts] Property 'debounceTime' does not exist on type 'Observable<any>'.

it's kind of annoying, since i kinda worry something doesn't work under the hood that i''m not aware of.

What am i missing here? Thank You.

Answer 1

As explained in some comments, it's not a TSLINT error, it's a Typescript error.

The thing here, you're patching the prototype of Observable when you do that: import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged';

Instead of doing that, you might just want to take advantage of a new feature called lettable operators since rxjs v5.5. It let you use a new .pipe operator which takes functions as argument (rxjs operators or your own).

So instead of your code, try the following one:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

// notice this import will not patch `Observable` prototype
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-form4th',
  templateUrl: './form4th.component.html',
})
export class Form4thComponent implements OnInit {
  searchField: FormControl;
  searches: string[] = [];

  constructor() { }

  ngOnInit() {
    this.searchField = new FormControl();

    this.searchField
      .valueChanges
      .pipe(
        debounceTime(400),
        distinctUntilChanged()
      )
      .subscribe(term => {
        this.searches.push(term);
      });
  }
}

By not patching the prototype of Observable it'll help your bundler to do tree shaking (if available) but I'm sure it'll be easier for Typescript to make the necessary checks as the functions will have to be imported in the same file. (that said, I've been using the old fashion method for a while and VSC was working as expected).