WIP: Typing HOCs with recompose
It's hard to keep prop types of underlying components of HOCs. Even the official documentation is not working well. It's even harder to have multiple HOCs typed and maintain with peer developers. Here comes recompose, the HOC utility module. If we have recompose properly typed, we can omit typing of our own HOCs taking advantage of recompose and flowtype's type inference.
recompose still doesn't have official flowtype definition, but there are some efforts:
This gist is an effort to make it happen based on the PRs above.
Goals
- Keep types of underlying component's
props - Allow underlying component to ignore additional
propsby HOC - No additional type annotations on top of
recompose
Implementation details
- In a union type, a specific type should come before more general types.
- NG:
T | Fn1<A, B> - OK:
Fn1<A, B> | T
- NG:
- HOCs that provide additional props may return
HOC<$Shape<A & B>, B>. In this way, the underlying component can ignore some unnecessary intermediate props.- For example:
const withOpen = withValue(false, (open, setOpen) => ({ open, setOpen })); const withToggle = withProps(({ open, setOpen }) => ({ toggle: () => setOpen(!open) })); // `Something` doesn't need `setOpen`! function Something({ open, toggle }) { /* ... */ } const enhancedSomething = compose(withOpen, withToggle)(Something);
- For example:
-
suppress_commentsuppresses also next next line in addition to next line. So put a new line after the suppression target line.-
For example:
// .flowconfig [options] suppress_comment=^ $ExpectError$ // or suppress_comment=\\(.\\|\n\\)*\\$ExpectError// $ExpectError 'foo'.bar(); 'foo'.bar(); // This line's error is also suppressed! // $ExpectError 'foo'.bar(); 'foo'.bar(); // This line's error is not suppressed!
-