Typescript tsx文件中的泛型类型解析

我试图理解在typescript中使用tsx文件是否会限制类型推断

如果创建无状态的react组件：

interface TestProps {
    foo: string;
}

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

接口测试道具{
foo:string；
}
export const TestComp:React.StatelessComponent=x=>{
返回（{foo}）；
};

然后在第二个tsx文件中尝试以下操作：

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' />);

从“/TestComp”导入{TestComp}；
const getProperties=function
（节点：React.ReactElement
）：P{
返回node.props
};
var props1=getProperties（React.createElement（TestComp，{foo:'bar'}））；
var props2=getProperties（）；

props1将具有推断类型的TestProps，props2将具有推断类型的any

---

我的印象是最后两行是相等的。Typescript认为第二次调用中的对象是一个

React.ReactElement

？

这里只是一些语法混淆。您的箭头函数没有执行您认为它可以执行的操作：

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

---

另一方面，关于箭头函数的一个简短风格说明：如果我被迫使用

bind

，我通常只使用箭头函数。在这个简单的例子中，我实际上更喜欢使用普通函数，因为

这个
没有什么奇怪的事情发生。
Michael的回答为我指明了正确的方向，因为它让我深入到.d.ts文件中寻找React，但实际原因更微妙

这段代码

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

在哪里

或

为Typescript提供较少的信息，并允许它推断正确的类型，而不是强迫它使用错误的类型…
进一步调查后，如果我将TestComp定义为一个普通函数而不是箭头函数，它似乎可以工作
导出函数TestComp（props:TestProps）{…}
是的，函数中缺少的
x
是一个输入错误，因为我试图将我的实际代码简化为一个问题示例。出于许多原因，我决定使用普通函数（主要是它改进了酶/jest测试快照中的组件名称），但出于C#背景，我更喜欢arrow函数处理此
的方式，因为它更接近我的心智模型。。。
export const TestComp: React.StatelessComponent<TestProps> = x => {
    return(<div>{foo}</div>);
};

interface StatelessComponent<P = {}> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
    ...
}

function createElement<P>(
    type: SFC<P>,
    props?: Attributes & P,
    ...children: ReactNode[]): SFCElement<P>;

type SFC<P = {}> = StatelessComponent<P>;
interface SFCElement<P> extends ReactElement<P> { }

export function TestComp(x: TestProps) {
    ...
}

export const TestComp = (x: TestProps) => {
    ....
}