来自 Firebase 的数据的 Angular 2 类型接口强制错误

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 上（如果用户从未输入任何数据）。因此，如果我将 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; 类型不存在instagramFollowers：字符串； facebook喜欢：字符串；流派其他：字符串；根...'。） /Users/hughred22/nodeapp/dev/YouTube-BAP-app/WebAdminPanel/src/app/user-page/user-page.component.ts (84,250): 属性 'snapchatFollowers' 在类型'{ youTubeSubs: 字符串上不存在; instagramFollowers：字符串； facebook喜欢：字符串；流派其他：字符串；根...'。）

如果我将变量设为 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
}