Angular 2 type interface forcing error on data from Firebase

Issue

I am having a tough time to create an interface model to match the data come form Firebase. My web storm keep throwing type error for me. Here is the structure.

I have a model interface like this:

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

In Firebase, the data structure is almost the same:

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

But all the number type is string as that is how the Firebase store the data. Also, on Firebase it can be missing data like snapchatFollowers and twitterFollowers can not be on Firebase (if the user never input any data). So if I = the Foundation variable to a Firebase observable return of this

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

It throw error: ERROR in /Users/hughred22/nodeapp/dev/YouTube-BAP-app/WebAdminPanel/src/app/user-page/user-page.component.ts (84,189): Property 'twitterFollowers' does not exist on type '{ youTubeSubs: string; instagramFollowers: string; facebookLikes: string; genreOther: string; gen...'.) /Users/hughred22/nodeapp/dev/YouTube-BAP-app/WebAdminPanel/src/app/user-page/user-page.component.ts (84,250): Property 'snapchatFollowers' does not exist on type '{ youTubeSubs: string; instagramFollowers: string; facebookLikes: string; genreOther: string; gen...'.)

If I make the variable ANY type instead of my Foundation type, it will work. I can I create a correct interface model to take in optional Firebase data so I won't have this kind of typescript error?

Solution

Interface properties can have multiple possible types.

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
}

Answered By - Brother Woodrow