在 Observable 映射函数中正确声明 Typescript 类型

Question

我在 Angular 服务中有这个 fetch 函数。一切正常，但 TypeScript 抱怨 “类型 'Object' 上不存在属性 'statuses'。”

我想我需要为数据对象创建一个接口，但是当我尝试这样做时，我不确定在哪里声明它。我也尝试声明 HttpResponse 但这需要一个参数。任何线索都会很棒！

export class Status {
  constructor(
    public workflowId: string,
    public spawnTime: number,
    public spawnValue: string,
    public workflowName: string
  ) {
  }
}

fetch(command, params?) {
return this.http.post(`http://localhost:4000/${command}`, params)
  .pipe(
    map((data): Status[] => {
      const statuses = [];
      for (const status of Object.keys(data.statuses)) {
        const newStatus = new Status(
          status,
          data.statuses[status]['spawn-time'],
          data.statuses[status]['spawn-value'],
          data.statuses[status]['workflow-name']
        );
        statuses.push(newStatus);
      }
      return statuses;
    })
  )
  .pipe(
    catchError(this.handleError)
  );
}

Answer 1

好的，我在其他帖子的帮助下找到了答案。我必须为data 创建一个接口，因为来自http 请求的响应只是一个json 对象。抱歉，我花了一段时间才意识到发生了什么。这是不引发 TS 错误或警告的完整工作解决方案：

export interface Data {
  statuses: object;
}

@Injectable({
  providedIn: 'root'
})
export class EpisodeApiService {

  constructor(private http: HttpClient) {
  }

  fetch(command, params?) {
    return this.http.post(`http://localhost:4000/${command}`, params)
      .pipe(
        map((data: Data) => {
          const statuses: Status[] = [];
          for (const status of Object.keys(data.statuses)) {
            const newStatus = new Status(
              status,
              data.statuses[status]['spawn-time'],
              data.statuses[status]['spawn-value'],
              data.statuses[status]['workflow-name']
            );
            statuses.push(newStatus);
          }
          return statuses;
        })
      )
      .pipe(
        catchError(EpisodeApiService.handleError)
      );
  }
}

Answer 2

这是一个如何解析json信息的例子。 在此示例中，您需要在 first map 的内部进行 map inside，它将作为迭代器工作，然后返回解析为接口 @987654323 的对象@

 export interface Status {
       status1: string;
       status2: string;
       status3: string;
    }   


    fetch(command, params?) {
      return this.http.post(`http://localhost:4000/${command}`, params)
        .pipe(
           map((res: any) => {
              return res.map(res =>{
                   return <Status> {
                      status1: res.stausOne,
                      status2: res.stausTwo,
                      status3: res.stausThree,  
                   }
               });                   
           }))
        .pipe(
            catchError(this.handleError)
         );