FlowTyped HOCs across files #671
Comments
You need to type withNavbar too |
Hey, @istarkov thanks for helping - could you elaborate? What is the reason that it works when the hoc is defined within screen.js and not when it's in a different file? I've tried typing it but am still not seeing it pull through. |
It's how flow works, if something is used inside one file and not exported flow can infer function types. In your case withNavbar have same return type as setStatic /* @flow */
import { setStatic } from 'recompose';
import type { HOC } from 'recompose';
const withNavbar = <T>(title: string): HOC<T, T> =>
setStatic('navigationOptions', {
headerTitle: title,
});
export default withNavbar; |
Also having that * is deprecated I would recommend to type Enhanced components as const SomeComponentExt: React.ComponentType<EnhancedProps> = compose(
hoc1, ..., hocN
)(SomeComponent)
export default SomeComponentExt; |
The best of above you don't need any type imports from recompose like |
Also exported function can be used outside of your project so not only performance |
This is awesome thanks so much for clearing it up! |
How can I use const enhance = setStatic('foo', 'bar');
const Foo: ComponentType<{ children: Node}> = enhance(({ children }) => children);
console.log(Foo.foo); // Flow error, property foo is missing in React.StatelessFunctionalComponent [1]. |
@FezVrasta better to use resources like stack overflow as it already have answers on this, as it's the same how to type any react component with static fields |
Doesn't this nullifies all the automatic inference that should happen with the Recompose support for Flow? This stuff should be automatically inferred |
What exactly nulified in your case? |
That I have to manually specify the type of my final enhanced component. Other HOCs will automatically add the needed inferred types. |
What changed? You need to specify that type before in HOC, you need to specify it now. |
You need to specify type of your classes so it's all the same |
I don't know, it seems redundant. Anyway your suggestion doesn't work, Flow complains:
|
Because setStatic type is wrong https://github.com/acdlite/recompose/blob/master/src/packages/recompose/index.js.flow#L174 must be something like
|
Thanks. I fixed the typo ( |
flow is magic ;-) |
For a fast fix you can cast to |
Thanks, it's really discomforting to see that one of the most popular React libraries, maintained by one of the Facebook guys, has so bad Flow support, technology built at Facebook 😥 |
Current maintaineers are not facebook employes. Mostly I wrote flow support, and having that I never used setStatic it has problems. Also & types were always problematic in flow, and in most cases broke all. Most of hocs works well with flowtype as I use flowtype and recompose on daily basis. |
I see, I'd love to be good enough in Flow to contribute to it. Maybe moving the types into the library may help to get more contributions? Setting up flow-typed is pretty complex and time intensive. |
Types are already in library see here is type tests library itself is not typed, but at the moment I wrote typedefs it wasn't possible because of some flow issues. |
running in project root
you get the all flowtype tests, editor support vscode, nuclide atom is also work well in any file marked with |
@FezVrasta see #678 |
Ok thanks for all the info and for your time! |
Also to be fair, last months I use render props components more and more like https://github.com/renatorib/react-powerplug and flow was one of the most thing which affects my move into render props world. Much more easier to use such components with flow, in a lot of cases you dont need to type anything. So can highly recommend at least library above |
I'm essentially trying to create a file with a reusable HOC called
withNavbar
, it is just asetStatic
with a few defaults.This may be a misunderstanding of mine, but I'm seeing the following and can't understand why;
./with-navbar.js
./screen.js
When I remove
withNavbar('MyCounter')
OR move the code in./with-navbar.js
to the top of thescreen.js
file, I get all the inferred props. However with it, props areempty
.The text was updated successfully, but these errors were encountered: