TypeScript报错TS2339：Object无json属性及map方法问题咨询

第一个错误："map" 不存在的原因 #

在RxJS 6及以上版本中，操作符已经改为pipeable操作符，不能直接在Observable对象上调用.map()，而且导入方式也完全变了：

• 你之前直接import 'rxjs'的写法是RxJS 5及更早版本的用法，现在需要单独导入具体操作符，或者导入rxjs/operators集合。

第二个错误：Property 'json' does not exist on type 'Object'的原因 #

从Angular 4.3版本开始，官方推荐使用HttpClient（替代旧的Http模块），而HttpClient会自动将HTTP响应解析为JSON格式，所以你完全不需要再手动调用.json()方法。如果代码里还保留这个调用，自然会触发类型错误。

正确的代码调整步骤 #

1. 修正RxJS操作符的导入与使用

   • 先移除无用的import 'rxjs'，改为导入需要的map操作符：

     import { map } from 'rxjs/operators';
     

   • 把原来的链式调用改成用pipe()包裹操作符的写法（RxJS 6+标准用法）：

     // 错误写法（RxJS 5风格）
     this.http.get(url).map(res => res.json());
     
     // 正确写法（RxJS 6+ + HttpClient风格）
     this.http.get(url).pipe(
       map(res => res) // HttpClient已自动解析JSON，直接使用res即可
     );
     

2. 确认HTTP模块的正确导入

   • 确保你的模块（比如app.module.ts）中导入的是HttpClientModule而非旧的HttpModule：

     import { HttpClientModule } from '@angular/common/http';
     
     @NgModule({
       imports: [HttpClientModule]
     })
     export class YourModule { }
     

3. 如果必须使用旧的Http模块（不推荐）
   要是你因特殊原因还在使用旧的Http，可以通过类型断言绕过类型检查：

   import { Http } from '@angular/http';
   import { map } from 'rxjs/operators';
   
   this.http.get(url).pipe(
     map(res => (res as any).json())
   );
   

总结来说，你的核心问题是没适配RxJS 6+的操作符新用法，同时没意识到HttpClient自动解析JSON的特性。按照上面的步骤调整后，两个错误都应该能解决。

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