Type inference not working for React ref callback param

[use-strict]

This looks like a type inference issue with tsc 1.8.0+ (also nightly), but I'm not sure. It could also be because of typings.

The offending code looks something like this:

// Inside React component
render() {
    return <Overlay ref={ref => this.overlayEl = ReactDOM.findDOMNode(ref) as HTMLElement} />;
    // error TS7006: Parameter 'ref' implicitly has an 'any' type.
}

I'm using ref "callback" syntax because the string-based syntax is deprecated by react and also not type safe. Needless to say, I have "noImplicitAny" enabled.

It looks like ref type is now an intersection between two types (relates to #5478), and the type inference no longer works, where previously it would be an instance of Overlay.

I can work around this issue for now by manually passing the type, like (ref: Overlay) =>, but it should work without it as well.

[RyanCavanaugh]

FWIW they say it's "legacy", not "deprecated", though in terms of their engineering cycle I have no idea what that means.

If you don't mind diverging your react.d.ts file, I'd recommend changing the definition of ref by removing the string | part of it.

The language-side fix here is non-React-specific, though -- when a function expression is contextually typed by a union type where exactly one of the constituents of the union has a call signature, we should use that type to contextually type the expression rather than giving up.

[RyanCavanaugh]

... OK it turns out we already do that. I'll investigate what's going on.

[yuit]

already fix in master and latest nightly built Here is the scenario I tried using typing files from @types
ref parameter of an error function is now inferred to be Overlay

import * as React from "react"
import * as ReactDOM from "react-dom"

class Overlay extends React.Component<{}, {}> {
    render() {
        return <div> Overlay </div>
    }
}
class C extends React.Component<{}, {}> {
    overlayEl: HTMLElement;
    render() {
        return <Overlay ref={ref => this.overlayEl = ReactDOM.findDOMNode(ref) as HTMLElement} />;
    }
}

{
    "compilerOptions": {
        "noImplicitAny": true,
        "jsx": "react"
    }
}