- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的 Angular 组件上,我使用了 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
,并在浏览器上运行该应用程序按预期工作并且在浏览器控制台上也没有错误消息或警告。
但是,我的 vscode 上有一条奇怪的 TSLint 消息说:
[ts] Property 'debounceTime' does not exist on type 'Observable<any>'.
这有点烦人,因为我有点担心某些我不知道的东西在幕后不起作用。
我在这里错过了什么?谢谢。
最佳答案
正如一些评论中所解释的,这不是 TSLINT 错误,而是 Typescript 错误。
这里的事情是,当你这样做时,你正在修补 Observable
的原型(prototype):
导入“rxjs/add/operator/debounceTime”;
导入 'rxjs/add/operator/distinctUntilChanged';
与其这样做,您可能只想利用自 rxjs v5.5 以来称为 lettable operators
的新功能。它允许您使用一个新的 .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
的原型(prototype),它将帮助您的 bundler 进行 tree shaking(如果可用),但我相信 Typescript 会更容易进行必要的检查,因为函数必须导入到同一个文件中。 (也就是说,我一直在使用老式方法一段时间,而 VSC 按预期工作)。
关于javascript - TSLint 烦人的消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48207198/
我使用react-scripts-ts来生成React App,它提供了TSLint。 似乎没有选项可以告诉 react-scripts-ts 从构建管道中排除 TSLint。是否可以通过 tslin
如何禁用命名导入必须按字母顺序排列 - tslint ? 我收到错误: 命名的导入必须按字母顺序排列。 我不知道如何禁用此错误。 我的 tsconfig.json 配置是: { "compil
我查看了文档,但无法弄清楚 TSLint 中规则的默认值是什么。如果我没有指定此处找到的规则之一( https://palantir.github.io/tslint/rules/ ),那么它是否默认
我想知道是否有 TSLint 规则可以禁止以下代码: var arr = [1, 2]; //the line below should be disallowed arr.prop1 = "3";
clearFile() { (document.getElementById('uploadFile')).value = ""; } 给 [tslint] misplaced ope
我收到此 tslint 错误,我不明白为什么。该界面确实以大写字母开头。 29 第 11 栏错误|接口(interface)名称必须以大写的 I(接口(interface)名称)[typescript
我需要不允许 tslint 修复发现的错误。例如,如果它发现逗号丢失,我只需要它告诉我它找到了它,而不是实际修复它。 我在它的 vue-cli 文档中找到了“--no-fix”参数,但看起来它不起作用
我正在使用 the Angular starter kit 我正在尝试让 tslint 使用 --fix 标志自动修复我所有的 lint 问题。 我正在运行脚本:npm run tslint --fi
我正在尝试为 VueJS 项目中的代码块禁用 TSlint(版本:typescript 3.5.2,tslint 5.18.0),但它似乎不起作用(它仍然在编译时显示此 block 的错误和警告npm
我以前用 rxjs-tslint-rules包来了解我的项目中与 RxJS 相关的问题。它被添加到我项目的 package.json 文件的 devDependencies 部分。 现在,有 rxjs
当我尝试运行命令 ng lint --fix cli 抛出此错误: An unhandled exception occurred: Cannot find builder "@angular-dev
我们最近将我们的 Angular 2 项目升级到了 @angular/cli 1.0 版。我们还将 tslint 从 2.x 升级到 5.x。现在我们在设计时(在 VSCode 输出终端中)收到以下
根据 this solution,我通过 tsconfig.json 中的 baseUrl 编译器选项使用根目录相对导入,但我遇到了一个问题,Atom IDE 向我显示如下所示的 linting 错误
我有一个用 TypeScript 为 TSlint 编写的自定义规则,我可以在我的 Linux VM 上使用的脚本中使用 ts-node 运行它: #!/bin/bash set -e ROOT_DI
默认情况下,在 angular-cli 项目中,tslint 设置包含了一些会弯曲的东西。最近,一位新开发人员联系我,说我在 Atom 中配置了他们的 tslint 实例。 我被问及以下行: impo
这是我们的环境 > \node_modules\.bin\tslint --version 4.0.1 > npm install --save-dev tslint-microsoft-contri
我的 tslint.json 如下所示 { "defaultSeverity": "error", "extends": [ "tslint:recommended"
大家好,npm 有问题和 tslint我希望你能帮助我。 好的,我的情况和代码来了: package.json "scripts": { "lint": "tslint -c tslint.j
我正在尝试配置我的TSLint规则ordered-imports以使导入顺序如下所示: // React import React from 'react'; import { View } from
我的 tslint.json 中有以下规则: "member-ordering": [ true, { "order": [
我是一名优秀的程序员,十分优秀!