reactjs - コンポーネントのプロパティから子としての関数の型

そのような場合に適切な型定義を取得する方法はありますか？

<Resource data={{ foo: 1 }}>{data => data.foo}</Resource>;
                                            ^
                                     should be number

Reactなしの簡単な例から始めてみましたが、かなり簡単でした：

type IResult<P> = { [key in keyof P]: P[key] };
function foo<P>(
  c: (data: IResult<P>) => any,
  props: { data: P }
) {
  c(props.data);
}

foo(data => data.foo, { // `data.foo` is number
  data: { foo: 1 },
});

でも、Reactで同じような実装を試してみたときはうまくいきませんでした :/

type IResult<P> = { [key in keyof P]: P[key] };

interface IRProps<T = any> {
  data: T;
  children(data: IResult<T>): React.ReactNode;
}

class Resource extends React.Component<IRProps> {
  render() {
    return this.props.children(this.props.data);
  }
}

私が得られるのは (parameter) データ: {} または (parameter) データ: any だけです。

私はTypeScript v2.6.1とReact 16.2を最新の型定義と一緒に使用しています。

ありがとうございます！

回答 #1

JSXとジェネリクスは一緒に使うのが少し大変なので、私たちは「TypeScriptにこれを食べさせる」ゲームをしなければなりません。