React组件子元素函数如何获取正确TypeScript类型？

这个问题的核心在于React类组件的泛型没有被正确传递，导致TypeScript无法从data属性推断出children函数参数的具体类型。我们来一步步拆解并解决它：

问题原因分析 #

你在非React环境的代码能正常工作，是因为函数foo明确接收了泛型P，TypeScript可以通过props.data的类型自动推断出P，进而让回调函数c的参数获得精准类型。但在React类组件中，你定义的IRProps<T>虽然带有泛型，但Resource类继承React.Component<IRProps>时，没有把泛型T传递给IRProps，导致T默认使用了any，最终children的参数类型被识别为any或空对象{}。

解决方案1：将类组件改为泛型类 #

修改Resource类，让它接收泛型T并传递给IRProps，让TypeScript能从data属性推断出类型：

import React from 'react';

// 其实IResult<P>和P是等价类型，保留原定义或省略都不影响效果
type IResult<P> = { [key in keyof P]: P[key] };

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

// 让Resource类成为泛型类，接收T并传递给IRProps
class Resource<T> extends React.Component<IRProps<T>> {
  render() {
    return this.props.children(this.props.data);
  }
}

现在使用组件时，TypeScript会自动从data={{ foo: 1 }}推断出T为{ foo: number }，children函数中的data.foo就会被正确识别为number类型：

<Resource data={{ foo: 1 }}>{data => data.foo}</Resource>

解决方案2：简化类型定义（省略IResult） #

因为IResult<P>本质上和P是完全相同的类型（只是对P的所有键做了一次映射复制），所以可以直接简化类型定义，让代码更简洁：

import React from 'react';

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

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

解决方案3：使用泛型函数组件（更推荐） #

函数组件对泛型的支持更直观，实现起来也更轻量化：

import React from 'react';

type ResourceProps<T> = {
  data: T;
  children: (data: T) => React.ReactNode;
};

const Resource = <T extends unknown>(props: ResourceProps<T>) => {
  return props.children(props.data);
};

使用方式和之前一致，类型提示同样能正常工作。

验证效果 #

无论采用哪种方案，当你编写data => data.foo时，TypeScript都会正确提示data的类型为{ foo: number }，data.foo的类型为number，完美解决原问题中的类型识别错误。

内容的提问来源于stack exchange，提问作者Rafał Filipek