Extending Flow Types

[tgrecojs]

I added a description property on to the post interface so now it looks like the block below:

// @flow
export type Post = {
  title: string,
  description: string,
  author: string,
  date: string,
  tags: Array<string>,
  body: string,
  slug: string,
};

Everything works perfect in development but then when I try to commit changes to my personal project I receive the following error.

export default ({ title, date, tags, body }: Post) =>
                                                  ^^^^ property `description`. Property not found in. See: // src/components/Post/index.js:70

I'm new to flow so my apologies if my issue is obvious and glaring. For what it's worth, I did spend some time trying to get to the bottom of this before posting but I didn't find a resolution 😄

[infiniteluke]

No problem! I worried flow might raise the barrier of entry to contributed, so that's not on you!

You need to add do this:

export default ({ title, description, date, tags, body }: Post) =>

Then, you need to use it in the post component. What flow is telling you is that the Post expects a description property.

In my opinion, a description of a Post should be optional. You would express this in flow as so:

// @flow
export type Post = {
  title: string,
  description?: string,
  author: string,
  date: string,
  tags: Array<string>,
  body: string,
  slug: string,
};

Note the ? after description.

Then, in the component, you will need to handle the case of description being null (and not show any ui) and the case of it being a string for flow to be happy.

Let me know if this helps!

[tgrecojs]

Awesome @infiniteluke that worked perfect. 👍 Trying to navigate this project with flow really isn't too confusing IMO. I have worked a bit in type script so that makes it kind of a familiar syntax however I haven't dove head first into using flow at all.

I do completely agree that thedescription prop should be optional but I am curious as to why it's necessary in order to pass the flow check. In my case, Each of my posts contain a description property so I would think that this would still work without specifying optional type .. haha i am missing something here I think 🤔

thanks for the help thought. glad I could help contribute a lil bit! Awesome project here so def. interested in continuing to help out 😄

[infiniteluke]

Thanks @tgrecojs! It's only necessary to make it optional from a functional standpoint. If it's optional the check in the render method for its existence becomes necessary. Does that make sense?

[tgrecojs]

😬 i'm not exactly picking up what you're saying. Well, i actually think i may be but if that's the case then i'm still a pit tripped up.

Let's say that I didn't want my description property to be optional, how would I go about adding that to my type? I've been able to do this during development but then once flow runs, it fails unless this is optional. also my apologies if i've been repeating myself haha but I'm not sure if there's a piece of set up i'm missing.

anyways thank you! I have created my blog to currently use next-static --> tgrecojs.com. I am going to be promoting the project big time 😎 haha