CODEWITHSUNDEEP
angulartypescriptfirebasefirebase-realtime-database
Hugh Hou
Hugh Hou

Reputation: 2374

Angular 2 type interface forcing error on data from Firebase

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?

Upvotes: 1

Views: 262

Answers (2)

Mohd Imran Ali
Mohd Imran Ali

Reputation: 1

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

Upvotes: 0

Brother Woodrow
Brother Woodrow

Reputation: 6372

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
}

Upvotes: 2

Related Questions