React PropTypes vs. Flow

Question

PropTypes and Flow cover similar things but are using different approaches. PropTypes can give you warnings during runtime, which can be helpful to quickly find malformed responses coming from a server, etc. However, Flow seems to be the future and with concepts like generics is a very flexible solution. Also the autocompletion offered by Nuclide is a big plus for Flow.

My question now is which is the best way to go, when starting a new project. Or could it be a good solution to use both, Flow and PropTypes? The problem with using both is that you write a lot of duplicate code. This is an example of a music player app I wrote:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Both definitions basically contain the same information and when the data type is changed, both definitions need to be updated.

I found this babel plugin to convert type declarations to PropTypes, which might be a solution.

Answer 1

One year after asking this question, I wanted to give an update about how my experiences with this problem.

As Flow evolved a lot, I started typing my codebase with it and did not add any new PropType definitions. So far, I think this is good way to go, because as mentioned above, it allows you to not only type props but other parts of your code, too. This comes in really handy for example when you have a copy of you props in the state, that can be modified by the user. Also, auto-completion in IDEs is an awesome gain.

Automatic converters in one or the other direction didn't really take off. So, for new projects, I would now really recommend using Flow over PropTypes (in case you don't want to do the typing twice).