Раздражающее сообщение TSLint

В моем угловом компоненте я использую два метода из RxJs, debounceTime() и 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);
        });
  }
}

Приложение работает нормально, нет ошибок или даже предупреждающих сообщений при выполнении (сборке), т.е. ng serve, и запуске приложения в браузере работает как положено и нет сообщения об ошибке или предупреждения в консоли браузера.

Однако у меня есть это странное сообщение TSLint в моем vscode, говорящее:

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

это немного раздражает, так как я немного беспокоюсь, что что-то не работает под капотом, о чем я не знаю.

Что мне здесь не хватает? Благодарю вас.


typescript javascript angular rxjs tslint
person xcode    schedule 11.01.2018    source источник
comment
Это не TSLint, а TypeScript сообщение.   -  person indexoutofbounds    schedule 11.01.2018
comment
хорошо, тогда в чем проблема?   -  person xcode    schedule 11.01.2018
comment
Фрагменты предназначены для запускаемых примеров. Только для кодовых блоков используйте кодовые блоки.   -  person T.J. Crowder    schedule 11.01.2018
comment
@xcode Это может быть полезно.   -  person indexoutofbounds    schedule 11.01.2018
comment
Возможный дубликат наблюдаемого свойства angular2 'debouceTime' не существует по типу 'Observable‹any›'   -  person indexoutofbounds    schedule 11.01.2018
comment
Я предпочитаю использовать import "rxjs/add/operator/debounceTime";, а не import "rxjs/Rx"; (мой tslint.json также блокирует импорт целых rxjs, я предпочитаю это), но после помещения import "rxjs/add/operator/debounceTime"; на main.ts сообщение все еще появляется, почему?   -  person xcode    schedule 11.01.2018
comment
оказывается, мне нужно перезапустить vscode после того, как я поместил этот импорт в main.ts   -  person xcode    schedule 11.01.2018

Ответы (1)


arrow_upward
5
arrow_downward

Как поясняется в некоторых комментариях, это не ошибка TSLINT, а ошибка машинописного текста.

Дело в том, что вы исправляете прототип Observable, когда делаете это: import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged';

Вместо этого вы можете просто воспользоваться новой функцией под названием lettable operators, поскольку rxjs v5.5. Это позволяет вам использовать новый оператор .pipe, который принимает функции в качестве аргумента (операторы rxjs или ваши собственные).

Поэтому вместо вашего кода попробуйте следующий:

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);
      });
  }
}

Не исправляя прототип Observable, это поможет вашему упаковщику выполнять встряхивание дерева (если доступно), но я уверен, что Typescript будет проще выполнять необходимые проверки, поскольку функции должны быть импортированы в тот же файл. . (тем не менее, я некоторое время использовал старомодный метод, и VSC работал, как и ожидалось).

person maxime1992    schedule 11.01.2018
comment
Я попробовал вашу альтернативу, но vscode все еще выдает мне предупреждение [ts] Property 'debounceTime' does not exist on type 'Observable<any>'., хотя компиляция прошла успешно, и приложение работает нормально. Это немного раздражает. - person xcode; 11.01.2018
comment
import { debounceTime, DifferentUntilChanged } из 'rxjs/operators'; //пропускается ли from? - person heringer; 14.08.2018