React: Type inference not working for ref callback

Type inference is not working for the ref callback prop. I believe this is the same issue as in #7088, which was fixed over a year ago.

TypeScript Version: 2.3.2

Code

// A *self-contained* demonstration of the problem follows...
class Other extends React.Component<any, any> {
	render() {
		return <div />;
	}
}

class Container extends React.Component<any, any> {
	private _ref: Other;

	render() {
                // Parameter 'ref' implicitly has an 'any' type.
		return <Other ref={ ref => this._ref = ref } />;
	}
}

Expected behavior: Type of parameter ref should be inferred as Test

Actual behavior: Parameter ‘ref’ implicitly has an ‘any’ type.

[timc13]

would love to see this get fixed!

[simonvizzini]

Thank you, your example indeed works. Finally I had time to come up with a better example that doesn’t work for me. I’m probably doing something wrong I think:

interface MyInputProps extends React.ChangeTargetHTMLProps<HTMLInputElement> {
    onValid?(): boolean;
    onInvalid?(): boolean;
}

class MyInput extends React.Component<MyInputProps, any> {
    render() {
        const { onValid, onInvalid, ...inputProps } = this.props;
        return (
            <input { ...inputProps } />
        );
    }
}

var x = <MyInput ref={p => 0} /> // p is any

When I try to explicitly set a type like ref={(p: MyInput) => 0} then I get following compiler error:

message: 'Type '{ ref: (p: MyInput) => number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyInput> & Readonly<{ children?: ReactNode; }> & R...'.
  Type '{ ref: (p: MyInput) => number; }' is not assignable to type 'Readonly<MyInputProps>'.
    Types of property 'ref' are incompatible.
      Type '(p: MyInput) => number' is not assignable to type 'Ref<HTMLInputElement>'.
        Type '(p: MyInput) => number' is not assignable to type '(instance: HTMLInputElement) => any'.
          Types of parameters 'p' and 'instance' are incompatible.
            Type 'HTMLInputElement' is not assignable to type 'MyInput'.
              Property 'render' is missing in type 'HTMLInputElement'.'
source: 'ts'

When I try to set the type to HTMLInputElement I get:

message: 'Type '{ ref: (p: MyInput) => number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyInput> & Readonly<{ children?: ReactNode; }> & R...'.
  Type '{ ref: (p: MyInput) => number; }' is not assignable to type 'Readonly<MyInputProps>'.
    Types of property 'ref' are incompatible.
      Type '(p: MyInput) => number' is not assignable to type 'Ref<HTMLInputElement>'.
        Type '(p: MyInput) => number' is not assignable to type '(instance: HTMLInputElement) => any'.
          Types of parameters 'p' and 'instance' are incompatible.
            Type 'HTMLInputElement' is not assignable to type 'MyInput'.'
source: 'ts'

Clearly I have no idea what’s going on here and I’m just randomly throwing types at my code until the compiler stops complaining 😆