TypeScript报TS7053错误 如何正确声明类型解决Angular动态索引问题

TS7053错误触发原因：TypeScript严格类型校验规则下，不允许使用任意string类型值作为索引访问类实例属性。代码中getVal为普通字符串类型，TypeScript无法确认该字符串一定对应AppComponent类上的已声明属性，也无法匹配属性值类型，因此抛出类型错误。

提供两种生产可用的解决方式，优先选择方案1，类型安全性更高：

方案1：限定动态属性key的联合类型 #

将组件内所有可能被动态访问的属性名整理为联合类型，对动态生成的key做类型断言，明确告知TypeScript该key属于组件合法属性，代码修改如下：

import { Component } from '@angular/core';

// 声明组件可被动态访问的布尔属性名联合类型
type GroupKey = 'group1' | 'group2' | 'group3';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  seasons = ['Group 1', 'Group 2', 'Group 3'] as const;
  group1: boolean = false;
  group2: boolean = false;
  group3: boolean = false;

  show(val: string) { 
    for (let i = 0; i < this.seasons.length; i++) {
      const currentSeason = this.seasons[i];
      const getVal = currentSeason.toLowerCase().replace(/\s/g, '') as GroupKey;
      // 直接用相等判断赋值，逻辑和原if/else分支完全一致，减少重复代码
      this[getVal] = currentSeason === val;
    }
  }
}

补充：给seasons加as const修饰，可以让TypeScript推导出数组内的固定字符串值，后续新增分组时如果漏改联合类型，TS会直接在编译期抛错提示。

方案2：给类添加索引签名 #

如果后续会新增大量同类分组属性，不想每次新增都修改联合类型，可以给类添加字符串索引签名，明确字符串key对应的属性值类型范围：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 索引签名：所有字符串key访问的属性值，类型为boolean或string[]
  [key: string]: boolean | string[];
  seasons = ['Group 1', 'Group 2', 'Group 3'];
  group1: boolean = false;
  group2: boolean = false;
  group3: boolean = false;

  show(val: string) { 
    for (let i = 0; i < this.seasons.length; i++) {
      const currentSeason = this.seasons[i];
      const getVal = currentSeason.toLowerCase().replace(/\s/g, '');
      this[getVal] = currentSeason === val;
    }
  }
}

注意：索引签名的返回值类型必须覆盖类中所有已声明属性的类型，比如这里seasons是string[]类型，因此索引值类型需要写为boolean | string[]，否则会触发类型不匹配错误。

以下方式可以临时绕过TS校验，但会丢失类型安全能力，生产环境禁止使用：

• 在报错行上方加// @ts-ignore注释，跳过下一行的类型检查
• 将实例断言为any类型后赋值：(this as any)[getVal] = true

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