TypeScript Version: 3.3.0-dev.20190109

Search Terms: react function union inference

Code

import * as React from 'react';

interface Props1 {
  onSomething?: (data: number) => any;
}

interface Props2 {
  onSomethingElse?: (data: number) => any;
}

interface PropsA {
  foo: true;
  bar: string;
  fn: (arg: number | undefined) => JSX.Element;
}

interface PropsB {
  foo: false;
  bar: number;
  fn: (arg: number[]) => JSX.Element;
}

type Props = (Props1 | Props2) & (PropsA | PropsB);

declare class Component extends React.Component<Props> {}

<Component
  onSomething={(data) => data}
  foo={false}
  bar={3}
  fn={(arg) => <>{arg.toFixed(3)}</>} // This should be an error, but type argument is `any`
/>

Expected behavior:

1. (Props1 | Props2) & (PropsA | PropsB) expands to (Props1 & PropsA) | (Props1 & PropsB) | (Props2 & PropsA) | (Props2 & PropsB)
2. foo={false} narrows that down to intersections that include PropsB
3. Since PropsA has been eliminated, the only valid signature for the prop fn is (arg: number[]) => JSX.Element
4. In fn={(arg) => <>{arg.toFixed(3)}</>}, arg should be inferred as number[], which means arg.toFixed(3) should be an error.

Actual behavior:

arg is inferred as any with diagnostic message Parameter 'arg' implicitly has an 'any' type, but a better type may be inferred from usage. [7044], so there's no compilation error for arg.toFixed(3).

Sidenote:
bar={3} shows that this issue is unique to function signatures (I think). It correctly narrows between PropsA and PropsB for bar: string and bar: number, respectively, and enforces that the prop value matches correctly.

Playground Link: anyone have a suggestion for an online playground where I can use JSX and @types/react?

Related Issues: Not sure, didn't find anything that looks similar. Couldn't find any issue mentioning that diagnostic message code.