Generic type resolution in tsx files

Viewed 944

I'm trying to understand if there is a limitation to type inference with using tsx files in typescript.

If I create a stateless react component:

interface TestProps {
    foo: string;
}

export const TestComp: React.StatelessComponent<TestProps> = x => {
    return(<div>{foo}</div>);
};

and then in a second tsx file try the following:

import { TestComp } from './TestComp';

const getProperties = function<P>(node: React.ReactElement<P>) : P {
    return node.props
};

var props1 = getProperties(React.createElement(TestComp, { foo : 'bar' }));
var props2 = getProperties(<TestComp foo='bar' />);

props1 will have an inferred type of TestProps, props2 will have an inferred type of any.

I was under the impression that the two last lines were equivalent. Is there a reason that Typescript believes object in the second call to be a React.ReactElement<any>?

2 Answers
Related