reactjs - typescript :通用 react 组件上子项的类型推断

Question

给定一个在两个属性上通用的 React 组件，一个 load函数返回类型 T , 和 children (这是一个接受 T 类型参数的函数)...

class Test<T> extends React.Component<{
  load: () => T;
  children: (r: T) => JSX.Element;
}> {
  render() {
    return this.props.children(this.props.load());
  }
}

typescript 无法推断 res 的类型来自 load 的返回值, 它默认输入 {} .

<Test load={() => ({ test: 'x' })}>
  {res =>
    <span>
      {res.test}
    </span>}
</Test>;

这是一个错误，还是 typescript 无法根据返回值进行推断——因为它看起来支持 JSX 子项的键入。

编辑:

对于背景，用例正在创建一个接受 load 的“惰性”组件。函数返回一个 promise 解析到一些进一步的 JSX。

Answer 1

更新:与此同时，TypeScript 得到了改进，因此问题中给出的代码会自动推断出 res 的类型。我没有检查是哪个更改造成的，但我猜它发生在 3.0-3.3 左右。

---

我认为问题在于您的代码被转译为类似于以下内容的内容:

React.createElement(
  Test,
  {load: () => ({ test: 'x' })},
  res =>
    <span>
      {res.test}
    </span>
)

从这种情况可以更清楚地看出，编译器/定义很难正确推断通用参数。在您的情况下，提示编译器就足够了:

<Test load={() => ({ test: 'x' })}>
    {(res: { test: string }) =>
        <span>
            {res.test}
        </span>}
</Test>