Generic JSX Inference Issue

[quicksnap]

Tried finding an issue for this, but nothing turned up. I'm getting unexpected behavior with generic JSX:

TypeScript Version: 3.1.1

Search Terms: generic jsx inference

Code

import React, { Component } from 'react';

type Props<T> = {
  generate: (someArg: any) => T;
  consume: (data: T) => React.ReactNode;
};

class Foo<T> extends Component<Props<T>> {}

const fine = (
  <Foo
    generate={() => 123}
    consume={num => num / 2} // Works fine. Inferred type is `number`
  />
);

const error = (
  <Foo
    generate={thisCausesIssues => 123}
    consume={num => num / 2} // Error! Inferred type of `num` is `{}`
  />
);

Expected behavior:

num would infer correctly.

Actual behavior:

num is widened to the {} type. On TS 3.1.1 I get the error above. On ts@next, it seems not to understand my props whatsoever.

Playground Link:

Related Issues:

[RyanCavanaugh]

Same root cause as #25826

[quicksnap]

Is this to be closed then? Not that I would want that, but that was the fate of the root issue.

[quicksnap]

For this simple type of component, is there a workaround I could do? Not sure where I could annotate to help out TS.

One problem is that this kind of component is used in conjunction with connect() in React/Redux, e.g.

const ConnectedComponent = connect</*inferred generics*/>(/*...*/)(Foo)

And thus the ConnectedComponent loses the ability to pass along Foo's generic parameters.

(Sorry if that use case is confusing--might be especially confusing if you don't use React+Redux)

[mikeb-simspace]

I seem to have solved the issue by moving the inline function definition into a variable like:

const generate = thisNoLongerCausesIssues => 123
const consume = num => num / 2

const fine = <Foo generate={generate} consume={consume} />

Can anyone confirm that this works for their use case?

[weswigham]

Those kinds of declarations (ie, lambdas without annotations or context) will issue errors under noImplicitAny. All that will do is swap the inferred {} for an implicit any.

[mikeb-simspace]

Yes sorry I should have clarified -- take either prop out and annotate and it works fine

[quicksnap]

@mikeb-simspace Yes--Annotating generate seems to help:

const fine = (
  <Foo
    generate={() => 123}
    consume={num => num / 2} // Works fine. Inferred type is `number`
  />
)

const error = (
  <Foo
    generate={thisCausesIssues => 123}
    consume={num => num / 2} // Error! Inferred type of `num` is `{}`
  />
)

const noError = (
  <Foo
    generate={(noIssues: string) => 123}
    consume={num => num / 2} // Works fine!
  />
)

[typescript-bot]

This issue has been marked as a duplicate and has seen no activity in the last day. It has been closed for automatic house-keeping purposes.