来自官方 angular 脚本的错误

Question

我从https://material.angular.io/components/chips/overview复制了以下代码：

visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = true;

// Enter, comma
separatorKeysCodes = [ENTER, COMMA];

fruits = [
  { name: 'Lemon' },
  { name: 'Lime' },
  { name: 'Apple' },
];


add(event: MatChipInputEvent): void {
  let input = event.input;
  let value = event.value;

  // Add our fruit
  if ((value || '').trim()) {
      this.fruits.push({ name: value.trim() });
  }

  // Reset the input value
  if (input) {
      input.value = '';
  }
}

remove(fruit: any): void {
  let index = this.fruits.indexOf(fruit);

  if (index >= 0) {
      this.fruits.splice(index, 1);
  }
}

但我收到以下错误：

TSLint: Type boolean trivially inferred from a boolean literal, remove type annotation (no-inferrable-types)

Unused field visible

TSLint: Identifier 'value' is never reassigned; use 'const' instead of 'let'. (prefer-const)

为什么我会收到这些错误？我不认为这是 Angulars 的错。所以我一定是做错了什么？！

Answer 1

那些是 linting 错误，换句话说，它们不会产生错误，但它们存在是因为代码不符合 TSlint 样式指南，例如当您使用 standard js linter 和你正在放置 ; linter 会在 ; 下划线作为错误。

Answer 2

这些不是 "errors" 来自官方 Angular 文档。它们是来自 typescript linter 的警告。 Angular CLI 与 TSLint 捆绑在一起，TSLint 是一个检查您的代码并向您发出警告的软件包，因此您可以保持代码整洁并遵守标准。

TSLint: Type boolean trivially inferred from a boolean literal, remove type annotation (no-inferrable-types)

声明变量时，如果初始化它，则无需指定类型，因为 typescript 可以从指定值推导出它。

let myVar = true; // myVar is of inferred boolean type

Unused field visible

您声明了变量 visible 但从未使用过。这是一个提示，也许只是将其从您的代码中删除。

TSLint: Identifier 'value' is never reassigned; use 'const' instead of 'let'. (prefer-const)

如果您从未将值重新分配给变量，请使用 const 而不是 let。 const 变量将保存一个值，同时保护它不被更改。

只需使用推荐的修改：

selectable = true;
removable = true;
addOnBlur =true;

// Enter, comma
separatorKeysCodes = [ENTER, COMMA];

fruits = [
  { name: 'Lemon' },
  { name: 'Lime' },
  { name: 'Apple' },
];


add(event: MatChipInputEvent): void {
  let input = event.input;
  const value = event.value;

  // Add our fruit
  if ((value || '').trim()) {
      this.fruits.push({ name: value.trim() });
  }

  // Reset the input value
  if (input) {
      input.value = '';
  }
}

remove(fruit: any): void {
  let index = this.fruits.indexOf(fruit);

  if (index >= 0) {
      this.fruits.splice(index, 1);
  }
}

Answer 3

这是因为您的 IDE

启用了 TSLint

TSLint：从布尔文字中简单推断出类型布尔值，删除类型注释（不可推断类型）

在 ts 中类型是可推断的——你不需要在分配布尔值时明确提及 :boolean。更改如下

visible = true;
selectable = true;
removable = true;
addOnBlur = true;

未使用字段可见

您没有在代码中的任何地方使用 visible

TSLint：永远不会重新分配标识符 'value'；使用 'const' 而不是 'let'。 (首选常量)

当您不重新分配变量时，您将其定义为 const 而不是 let

const value = event.value;

Answer 4

您还可以选择在 tslint.json

中禁用此警告

"no-inferrable-types": [true, "ignore-params"] 到 "no-inferrable-types": [false, "ignore-params"]

来自官方 angular 脚本的错误

Errors from official angular script

phpstorm

angular-material

angular