Angular中访问初始为空、动态加属性的对象报TS7053错误如何解决？

问题原因 #

该TS7053报错来自TypeScript静态类型检查：你初始化data时赋值为{}，TS默认将其类型推断为无任何属性的空对象，不允许使用动态的数字/字符串作为键访问其属性。

解决方案 #

1. 显式声明对象的索引类型（推荐） #

根据你的业务场景给data加类型声明，保留TS的类型校验能力：

• 如果键都是数字、值都是字符串：

// 声明格式：{ [键的类型]: 值的类型 }
data: { [key: number]: string } = {};

• 如果键类型、值类型不固定，可以用泛型工具类型Record：

// 键支持数字/字符串，值为任意类型
data: Record<string | number, any> = {};

2. 临时跳过类型校验（不推荐，仅适合快速调试） #

直接给data声明为any类型，完全跳过TS类型检查：

data: any = {};

代码修正注意事项 #

你代码中的data.key = 'test2'是错误写法：该写法是访问data上名为key的固定属性，不是访问变量key对应的动态属性，动态属性必须使用方括号语法data[key]。

完整可运行示例 #

// 声明数字为键、字符串为值的索引类型
data: { [key: number]: string } = {};
const key = 1;
for( let i = 0; i < 5; i++){
  // 无需用Object.assign，直接赋值更简洁
  data[i] = 'test';
}

if(key in data){
  data[key] = 'test2';
}

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