使用类型索引访问组件的变量会导致 Angular 13 中出现 TS7053 错误

Question

我正在尝试使用 Angular 13 中的类型索引访问变量，但遇到 TS7053 错误。 This stackblitz 准确地显示了我正在做的事情，但是它在那里工作得非常好，没有错误。

export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  Prop01 : boolean = false;
  Prop02 : boolean = false;
  Prop03 : boolean = false;

  private setProp(prop: string, value: boolean): void {

    this[prop] = value;   // this works in the Stackblitz but not in my project

  }
}

唯一的区别是我使用的是 V13，而 stackblitz 仍然使用 V12。我查看了我的 VS Code 扩展，发现 Ts Lint 被 Es Lint 弃用，所以我禁用它并重新启动 VS Code，但 this[prop] 仍然抛出一个错误，提示

元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“MyComponent”。 在“MyComponent”类型上找不到带有“字符串”类型参数的索引签名。

我在旧版本的 Angular 中做过这个，所以我不明白是什么让它突然不起作用，有人知道这是为什么吗？

Answer 1

我建议用这些变量名创建一个enum：

export enum MyEnums {
  Prop01: 'Prop01',
  Prop02: 'Prop02',
  Prop03: 'Prop03'
}

组件：

import {myEnum} from './myEnums.ts'

export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  Prop01 : boolean = false;
  Prop02 : boolean = false;
  Prop03 : boolean = false;

  private setProp(prop: string, value: boolean): void {
    this[prop as MyEnum] = value;
    console.log(this[prop as myEnum]); // true or false, whatever your send
  }
}

Angular v12 是第一个默认包含 strict mode 启用（非常好）的版本，因此要求您创建访问该参数的签名非常严格。

您可以在旧版本中执行此操作，因为除非您手动将其设置为“开启”，否则此处不会启用严格模式

Answer 2

当您使用 3 个单独的变量而不是一个对象时（对于对象，有很多问题和答案，例如：Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; }）

对于您的变量，我会使用 type 并声明您的变量名，然后您可以为您的类型调用 as。所以像：

export type PropType = 'Prop01' | 'Prop02' | 'Prop03'; 

然后是你的函数：

private setProp(prop: string, value: boolean): void {
  this[prop as PropType] = value;
}