Angular - 指定可观察的返回类型？

Question

我在函数中有这部分：

this.myservice.getComments()
  .subscribe(data => {
    this.post.comments = data.body;
    this.post.comments_count = Number(data.headers.get('x-wp-total'));
    this.post.comments_pages = Number(data.headers.get('x-wp-totalpages'));
    this.content_ready = true;
  });

getComments 函数：

export class myservice extends DataService {
  protected url = 'my_url';

  constructor( protected http: HttpClient ) {
    super(http);
  }

  getComments(){
    return this.get(
      this.subUrl, true );
  }
}

dataService的相关部分：

export class DataService {
  protected url: string;

  constructor(protected http: HttpClient) {}

  get(subUrl:string = '', needObservable = false) {
    let options = {};
    if(needObservable) {
      options = {observe: 'response'};
    }
    return this.http.get(this.url + subUrl, options);
  }
}

所有这些都运行良好。问题是，我的 IDE (phpstorm) 抱怨 data.headers 和 data.body，认为这些属性在“对象”类型上不存在。

如何让它知道一切都很好？我想过输入返回值，但没有成功。

Answer 1

了解返回数据的类型是一个好习惯...这就是分配它的方式https://stackoverflow.com/a/49627627/9590251

在您的情况下 - 创建一个接口并将返回的数据分配给类型

Answer 2

您的data 的类型应该是从您的http.get<T>() 返回的类型

get(subUrl:string = '', needObservable = false) : Observable<T> {
    let options = {};
    if(needObservable) {
      options = {observe: 'response'};
    }
    return this.http.get<T>(this.url + subUrl, options); // add a type that you are expecting to be returned from api
}

-订阅

this.myservice.getComments()
  .subscribe((data : T) => {
    this.post.comments = data.body;
    this.post.comments_count = Number(data.headers.get('x-wp-total'));
    this.post.comments_pages = Number(data.headers.get('x-wp-totalpages'));
    this.content_ready = true;
});

Answer 3

这与 IDE 无关。只是 Typescript 的编译器认为 object 类型没有这些属性，这是正确的。

只需将data的类型设置为any - data: any即可。

.subscribe((data: any) => {
    this.post.comments = data.body;
    this.post.comments_count = Number(data.headers.get('x-wp-total'));
    this.post.comments_pages = Number(data.headers.get('x-wp-totalpages'));
    this.content_ready = true;
});