打字稿：通用反应组件上的儿童类型推断

Question

给定一个对两个属性通用的反应组件，一个load 函数返回类型T 和子项（这是一个采用T 类型参数的单个函数）...

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

typescript 无法从load 的返回值推断res 的类型，它默认为类型{}。

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

这是一个错误，还是打字稿无法根据返回值进行推断——因为看起来 JSX 子项的类型是受支持的。

编辑：

对于背景，用例正在创建一个“惰性”组件，它接受 load 函数，该函数返回一个解析为进一步 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>