Angular 15中字符串索引组件属性报错的解决方案

错误原因 #

TypeScript严格类型检查机制导致：arr中的元素被推断为通用string类型，但AppComponent类未定义字符串索引签名，无法确保所有字符串都是合法的组件属性名，因此this[val]触发类型错误。

解决方案 #

方案1：将数组定义为组件属性名的联合类型（推荐）

明确告知TypeScript数组元素都是AppComponent的合法属性名，类型检查会自动通过：

export class AppComponent {
  aUser = false;
  bUser = false;
  cUser = false;

  // 定义数组类型为组件属性名的联合类型数组
  arr: Array<keyof AppComponent> = ['aUser', 'bUser', 'cUser'];

  value: string;
  changed(value: string) {
    this.value = value;
    this.arr.forEach((val) => {
      // 此时val被识别为合法属性名，无类型错误
      this[val] = val === value;
    });
  }
}

方案2：为组件类添加字符串索引签名

若需要更灵活的字符串索引，可给组件类添加索引签名，指定索引对应的属性类型：

export class AppComponent {
  aUser = false;
  bUser = false;
  cUser = false;
  value: string;

  // 添加索引签名，覆盖类中所有属性的类型
  [key: string]: boolean | string | undefined;

  arr = ['aUser', 'bUser', 'cUser'];

  changed(value: string) {
    this.value = value;
    this.arr.forEach((val) => {
      this[val] = val === value;
    });
  }
}

注意：索引签名需覆盖类中所有属性的类型，否则会引发新的类型冲突。

方案3：使用类型断言临时绕过检查

若仅需临时解决问题，可通过类型断言告知TypeScript当前字符串是合法属性名：

export class AppComponent {
  aUser = false;
  bUser = false;
  cUser = false;

  arr = ['aUser', 'bUser', 'cUser'];

  value: string;
  changed(value: string) {
    this.value = value;
    this.arr.forEach((val) => {
      // 断言val为AppComponent的合法属性名
      this[val as keyof AppComponent] = val === value;
    });
  }
}

缺点：若数组中添加了不存在的属性名，TypeScript不会提示错误，存在安全隐患。

内容的提问来源于stack exchange，提问作者sarann