Angular 15动态变量索引类型报错问题求助

遇到的错误是因为TypeScript严格模式下，不允许使用类型不确定的表达式索引对象。以下是几种可行的解决方法：

方法一：为组件类添加索引签名 #

在你的组件类中定义字符串索引签名，明确允许以字符串作为键访问属性：

export class YourComponent {
  // 添加索引签名，可根据实际情况指定更精确的类型（比如File | boolean）
  [key: string]: any;

  isDefault: boolean = true;
  // 其他组件属性和方法
}

这样this['customeFileName' + id]的索引操作就符合TypeScript的类型检查规则了。

方法二：断言索引为类的键类型 #

如果你确定动态生成的键是组件已有的属性，可以将索引表达式断言为keyof typeof this：

this[`customeFileName${id}` as keyof typeof this] = fileList[0];

注意：如果customeFileName${id}是动态新增的属性，这种方法不适用，还是需要索引签名。

方法三：使用单独对象存储动态属性（推荐） #

避免直接在组件实例上动态添加属性，而是专门声明一个对象来管理这些动态文件：

export class YourComponent {
  isDefault: boolean = true;
  // 专门存储动态文件的对象，指定键为字符串，值为File类型
  customFileStore: { [key: string]: File } = {};

  // 处理文件的方法
  handleFileChange(event: any) {
    const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      this.isDefault = false;
      // 赋值到专门的存储对象
      this.customFileStore[`customeFileName${id}`] = fileList[0];
    }
  }
}

这种方式更符合TypeScript的类型规范，也便于维护。

另外，你之前尝试的as any写法位置错误，正确的临时写法应该是将整个索引表达式断言为any：

this[('customeFileName' + id) as any] = fileList[0];

但不推荐长期使用这种方式，建议选择前面的规范解法。

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