Angular 2 type interface forcing error on data from Firebase

Question

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?

Brother Woodrow · Accepted Answer · 2017-03-21 23:03:06Z

2

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 Mar 21, 2017 at 23:03

Brother Woodrow

6,3923 gold badges22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hugh Hou Over a year ago

Oh wow. This just take care of the error nicely. Great tips!!

dan1st · Accepted Answer · 2024-01-31 12:06:28Z

0

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

edited Jan 31, 2024 at 12:06

dan1st

17.1k17 gold badges116 silver badges145 bronze badges

answered Jan 30, 2024 at 16:35

Mohd Imran Ali

11 bronze badge

1 Comment

dan1st Over a year ago

Welcome to Stack Overflow! While this code 🧑‍💻 snippet may be the solution, including an explanation 🧑‍🏫 really helps to improve the quality of your post. Remember that you are answering the question for readers in the future 🤝, and those people might not know the reasons for your code suggestion.

Collectives™ on Stack Overflow

Angular 2 type interface forcing error on data from Firebase

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related