如何为此 Firebase 响应 JSON 构建 Typescript 接口？答案

【问题标题】：How to structure a Typescript Interface for this Firebase Response JSON?如何为此 Firebase 响应 JSON 构建 Typescript 接口？
【发布时间】：2016-07-05 23:09:29
【问题描述】：

我有这个从 Firebase 返回的 JSON 响应

{ "-KD8Evk7TULU6t6zxMHl": { "createdAt": 1458296568840, "isActive": true, "title": "...add a title", "updatedAt": 1458296568840 } }

问题第 1 部分：我应该如何为上述 JSON 构建我的 Typescript 接口？比如像下面这样？

export interface Hero {
  [id: string]: {
    createdAt: number;
    isActive: boolean;
    title: string;
    updatedAt: number;
  }
}

问题第 2 部分：我应该如何使用推荐的 Typescript 接口结构获取英雄的标题或 id？比如我想显示英雄id和英雄头衔

<html>
  ...omitted code for simplicity. I want to display hero id and title below.
  <h1> {{ hero.id }} </h1>
  <h1> {{ hero.title }} </h1>
</html>

【问题讨论】：

请分成两个独立的问题。这也将允许一个纯粹关于 Angular2 而另一个只关于 Typescript。
下次我会做得更好。感谢您的提醒

标签： javascript json typescript firebase angular

【解决方案1】：

第 1 部分

您可以使用这种方式或构建一个具有另一个属性“keyId”的类，该属性将存储从 Firebase 响应对象（“-KD8Evk7TULU6t6zxMHl”）接收到的 ID。在构造函数中，您应该使用收到的 id 填充 keyId 道具。不过它有点复杂，需要为每个 json 行创建一个新类。

第 2 部分

如果你坚持你的选项 1，那么你必须使用 "Object" 类从你的对象中读取——> hero[Object.keys(hero)[0]].title 或者只是 Object.keys(hero)[ 0] 如果你想要 id。这有点烦人，但我看不到另一种方式，除非您将接口更改为具有我之前提到的构造函数的类，然后您可以使用 hero[hero.keyId].title 或 hero.keyId 之类的 id ； )

【讨论】：