Angular 2 类型接口强制 Firebase 中的数据出现错误

Question

我很难创建一个接口模型来匹配来自 Firebase 的数据。我的网络风暴不断抛出类型错误。这是结构。

我有一个这样的模型界面：

   export interface Foundation {
            channelInfo?: {
              youTubeSubs?: number,
              instagramFollowers?: number,
              facebookLikes?: number,
              snapchatFollowers?:number,
              twitterFollowers?:number,
              genreOther: string,
              genre: Array<string>
            };
  }

在 Firebase 中，数据结构几乎相同：

            channelInfo: {
              youTubeSubs: string,
              instagramFollowers: string,
              facebookLikes: string,
              snapchatFollowers: string,
              twitterFollowers: string,
              genreOther: string,
              genre: [...]
            };

但是所有数字类型都是字符串，因为这就是 Firebase 存储数据的方式。此外，在 Firebase 上，它可能会丢失数据，例如 snapchatFollowers 和 twitterFollowers 不能在 Firebase 上（如果用户从未输入任何数据）。因此，如果 I = Foundation 变量到 Firebase 可观察的返回值

            channelInfo: {
              youTubeSubs: string,
              instagramFollowers: string,
              facebookLikes: string,
              genreOther: string,
              genre: [...]
            };

它抛出错误： /Users/hughred22/nodeapp/dev/YouTube-BAP-app/WebAdminPanel/src/app/user-page/user-page.component.ts 中的错误（84,189）：属性“twitterFollowers”不存在在类型 '{ youTubeSubs: string; Instagram 关注者：字符串； facebookLikes：字符串；流派其他：字符串；将军...'。） /Users/hughred22/nodeapp/dev/YouTube-BAP-app/WebAdminPanel/src/app/user-page/user-page.component.ts (84,250): 类型“{ youTubeSubs: string”上不存在属性“snapchatFollowers” ; Instagram 关注者：字符串； facebookLikes：字符串；流派其他：字符串；根...'。）

如果我将变量设为 ANY 类型而不是 Foundation 类型，它将起作用。我可以创建一个正确的界面模型来接收可选的 Firebase 数据，这样我就不会出现这种打字稿错误吗？

Answer 1

接口属性可以有多种可能的类型。

export interface ChannelInfo {
    youTubeSubs?: number | string,
    instagramFollowers?: number | string,
    facebookLikes?: number | string,
    snapchatFollowers?: number | string,
    twitterFollowers?: number | string,
    genreOther: string,
    genre: string[]
}

export interface Foundation {
    channelInfo?: ChannelInfo
}

Answer 2

interface Foundation {
            channelInfo?: {
              youTubeSubs?: number,
              instagramFollowers?: number,
              facebookLikes?: number,
              snapchatFollowers?:number,
              twitterFollowers?:number,
              genreOther: string,
              genre: Array<string>
            };
  }