Redux how to use "compose" with Typescript

Question

I have a bit issue with using compose function in Typescript, I always receive errors. The type definition in .d.ts is also quite confusing. For example:

type Props = { t: number }; 
const foo = (props: {}) => <div {...props} />;
const moo = (props: Props) => <div {...props} />;
const bar = (props: Props) => <div {...props} />;
const Dar = compose(foo, moo)(bar);

const Test = () => <Dar />;

Has several problems. It is complaining that "bar" does not have "foo" parameter (which it actually has).

Also, I cannot use since Dar is evaluated to JSX.Element not stateless function. Any IDEA with possible example of how to use compose in Typescript?

Thanks.

Answer 1

The inference of TypeScript works from left to right, a generic compose function composes functions from right to left, and it could lead to wrong types.

You can use a composition function which composes from left to right, like flow.