Typescript 建模：当 IDE 不知道结构时如何处理来自 API 的对象答案

【问题标题】：Typescript modeling: How to deal with an object coming from an API when the IDE doesn't know the structureTypescript 建模：当 IDE 不知道结构时如何处理来自 API 的对象
【发布时间】：2020-02-16 07:08:38
【问题描述】：

我正在从发送JSON 对象的API 中提取天气数据。现在我想对这个对象做一些事情并访问它的一个属性。但当然，IDE 不知道对象结构，它告诉我“对象”类型上不存在属性“x”。然而，在实践中，代码当然可以工作。但是有什么办法可以解决这个问题吗？

【问题讨论】：

创建模型或类型为 any
定义一个与接收的数据结构对齐的接口，然后将保存该结构的变量转换为该接口。
如果某个答案解决了您提出的问题，您可以点击投票下方答案左侧的复选标记。这会奖励那些努力帮助您的用户，并使社区成员更容易继续解决其他仍需要解决的问题。

标签： json angular typescript api

【解决方案1】：

在没有看到您的代码的情况下，我认为您可以应用 3 种不同的方法：

1) 一个简单的解决方案是让您使用generic T 类型：

  public getJSON<T>(): Observable<T> {
    return this.http.get<T>(url).pipe(
      tap(data => console.log(`JSON::get (tap)\n\tdata: %o`, data)),
      catchError(err => console.log(err))
    );
  }

你可以这样定义一个接口：

export interface GenericServerResponse {
   [x: string]: any
}

我猜在你的component.ts 中使用这个接口。

public componentData: GenericServerResponse = null;

但是这种方法会带走在项目中使用 typescript 的乐趣。

2) 您也可以使用union types，例如，服务响应可以是不同的类型，如下所示：

public getJSON(): Observable<UserModel | AdminModel | SuperUserModel> {
  return this.http.get<UserModel | AdminModel | SuperUserModel>(url).pipe(
  ...
}

或者更好，因为我们将重用它，声明类型：

export type ConfigModel = UserModel | AdminModel | SuperUserModel;

public getJSON(): Observable<ConfigModel>

这很简单，也更可靠，但您需要了解您可以收到的不同型号。

3) 我认为你应该这样做，因为你必须有天气 API 的完整响应，映射整个模型 4 示例：

export interface WeatherModel {
   temp: number;
   wind: number;
   cloudCoverage: number;
   city: {
    id: number;
    name: string;
   };
   ... --> the rest of the model from the API, you don't necessarily have to put all the API's attributes, only the ones you use in your app.
}

那么你只需要使用Partial utility type:

public getJSON(): Observable<Partial<WeatherModel>> {
  return this.http.get<Partial<WeatherModel>>(url).pipe(
  ...
}

Partial 使接口的每个属性都是可选的。这样 IDE 会很高兴并显示对象属性。

如果您需要在组件中输入数据，只需对 Partial 执行相同操作：

public componentData$: Observable<Partial<WeatherModel>>;
...
this.componentData$ = this.httpService.getJSON().subscribe(
  (resp: Partial<WeatherModel>) => console.log(resp.city.name)
);

【讨论】：