来自官方 Angular 脚本的错误

Posted 2023-03-13

【中文标题】来自官方 Angular 脚本的错误

【英文标题】：Errors from official angular script

【发布时间】：2018-11-11 23:28:18

【问题描述】：

我从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：从布尔文字中简单地推断出布尔类型，删除类型注释（不可推断类型） 未使用的字段可见 TSLint：永远不会重新分配标识符“值”；使用“常量”而不是“让”。 （首选常量）

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

【参考方案1】：

您还可以选择在 tslint.json 中禁用此警告

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

【参考方案2】：

这是因为您的 IDE 启用了 TSLint

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

在 ts 中，类型是可推断的 - 当您分配一个布尔值时，您不需要明确提及 :boolean。改变如下

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

未使用的字段可见

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

TSLint：永远不会重新分配标识符“值”；使用“常量”而不是“让”。 (prefer-const)

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

const value = event.value;

【参考方案3】：

这些不是 Angular 官方文档中的“错误”。它们是来自打字稿 linter 的警告。 Angular CLI 与 TSLint 捆绑在一起，TSLint 是一个检查您的代码并向您发出警告的包，因此您可以保持代码清洁并遵守标准。

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

声明一个变量时，如果你初始化它就不需要指定类型，因为打字稿可以从指定的值推导出它。

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

未使用的字段可见

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

TSLint：永远不会重新分配标识符“值”；使用“常量”而不是“让”。 （首选常量）

如果您从不为变量重新赋值，请使用 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);
  

【讨论】：

如果 Angular CLI 与 TSLint 捆绑在一起，那么我不明白为什么他们不会在没有警告的情况下清理代码。但这对我有帮助，谢谢！

【参考方案4】：

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