Angular中res['logo']报ts7053类型无法索引Object错误原因是什么

报错含义 #

你遇到的ts(7053)是TypeScript的静态类型检查报错，具体意思是：

Element implicitly has an 'any' type because expression of type '"logo"' can't be used to index type 'Object'. Property 'logo' does not exist on type 'Object'.

你尝试用'logo'作为键去读取res对象的属性，但TypeScript推断res的类型是基础的Object类型，这个类型定义里没有声明logo属性，所以不允许直接用自定义键索引，同时也无法确定你读取的属性类型，只能隐式标记为any，因此抛出错误。

触发原因 #

有3个相关问题共同导致：

• Angular HttpClient的post方法默认返回的是Observable<Object>类型，你没有主动指定接口返回值的类型，TypeScript默认认为返回的res只有基础Object的属性，不存在自定义的logo字段。
• 你代码里存在笔误：component中调用service方法时写的是imageUpload()，但service里实际定义的上传方法名是logoUpload()，二者不一致。
• 你component里构造FormData的代码写的是logoForm.append('logo', this.imageObj)，但你定义的存储文件的变量名是logoObj，这里引用的this.imageObj根本不存在，运行时也会报错。

解决方案 #

方案1（推荐，符合TypeScript规范） #

1. 先定义接口约束接口返回值类型：

// 可以写在service文件顶部，或者单独的类型定义文件里
interface LogoUploadRes {
  logo: string;
}

2. 修改service中的post调用，指定泛型类型：

logoUpload(logoForm: FormData){
  console.log('logo uploading');
  // 给post方法加泛型，声明返回值是LogoUploadRes类型
  return this.http.post<LogoUploadRes>('arn:aws:s3:::logo-bucket', logoForm);
}

3. 修正component里的两处笔误，直接读取属性即可：

onLogoUpload() {
  const logoForm = new FormData();
  // 修正变量名错误，用this.logoObj
  logoForm.append('logo', this.logoObj);
  // 修正调用的方法名，用logoUpload
  this.logoUploadService.logoUpload(logoForm).subscribe(res => {
    // 现在res已经被识别为LogoUploadRes类型，直接点出logo属性即可，不会报错
    this.logoUrl = res.logo;
  });
}

方案2（临时绕过检查，不推荐长期使用） #

如果只是临时调试不想定义类型，可以直接把res标记为any类型：

.subscribe((res: any) => {
  this.logoUrl = res['logo'];
})

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