Recently I was on Flow’s Gitter when someone asked the following question:
How can I type that I want a function argument to be a React component with
fooBarstatic method on it?
This question made me remember that a couple months ago, I’d had a similar problem (albeit without the
static requirement). I’ll explain how to ensure the method is present when composing higher order components, but expect that you know how to type generic HOCs as described in the Flow documentation.
Essentially, the main idea is to create an interface that contains the method you want to have and union it with the component passed into the function that generates the HOC.
Basically, this says, “Give me a class that’s a React component that also has an instance method called
enforcedMethod and I’ll give you back a React component with the same props and state types.”
As a more complete example, suppose we wanted to build a higher-order component that fired the
onClickedOutside method of a component when the user clicks anywhere outside the resulting element. It would be pretty catastrophic if we applied our HOC to a component that didn’t have an
onClickedOutside, so we’ll make Flow warn us if it isn’t present.
With this HOC, we can make a component set something within its state or take some other action when we click outside, and Flow will warn us if we don’t tell the HOC what to do when we click outside the element!
Now, let’s turn back to the original question of how to enforce a static method on a component. One would think that it would be as simple as adding
static to the interface, but you and I know better. Luckily, all we need to do is tell Flow that our function expects a class that is a React component that has a callable signature.
You’ll note that all we had to change from our first example was moving the type union outside of the
Class<...> expression. Now Flow will enforce that we pass in something with a
Mark is a full-stack engineer who cut his teeth on professional software development at Lucid Software where he specialized in building scalable backend systems. He's a huge fan of open source software and is one of the primary authors of Relate (database access library) and Cumulus (AWS infrastructure management). Mark loves watching shows with his wife, studying Chinese, and hunting Minecraft chickens.