如何让React组件AsyncFlatList的Item泛型从transformResponse返回值自动推断？

问题背景 #

现有一个接受ApiResponse和Item两个泛型的React组件AsyncFlatList，当前调用时必须显式定义并传入Item类型（比如PostMapped），需要额外定义中间类型，不够简洁：

function AsyncFlatList<ApiResponse, Item>({}: {
  url: string;
  transformResponse: (response: ApiResponse) => Item[];
  keyExtractor: (item: Item) => string;
}) {
  // 忽略实现
  return <></>;
}

// 当前调用方式
type Post = {
    id: number
    title: string
    body: string
    userId: number
}

type PostMapped = {
   id: string
   title: string
   body: string
}

<AsyncFlatList<Post[], PostMapped>
  url="https://jsonplaceholder.typicode.com/posts"
  transformResponse={(response) => response}
  keyExtractor={(post) => post.id}
/>

期望实现：无需显式定义PostMapped，让Item泛型自动从transformResponse的返回值类型中推断，调用时只需指定ApiResponse类型。

解决方案 #

利用TypeScript的泛型自动推断能力，调用时仅显式指定ApiResponse类型，Item类型会由transformResponse的返回值数组元素类型自动推导，无需额外定义中间类型：

修改后的调用代码 #

type Post = {
    id: number
    title: string
    body: string
    userId: number
}

<AsyncFlatList<Post[]>
  url="https://jsonplaceholder.typicode.com/posts"
  transformResponse={(response) =>
     response.map((singleResponse) => ({
       id: singleResponse.id.toString(),
       title: singleResponse.title,
       body: singleResponse.body,
     }))
  }
  // post参数类型自动推断为{ id: string; title: string; body: string }
  keyExtractor={(post) => post.id}
/>

原理说明 #

1. 当显式指定ApiResponse为Post[]时，transformResponse的参数response会被自动推断为Post[]类型。
2. TypeScript会分析transformResponse的返回值结构（这里是map后生成的新数组），自动提取数组元素的类型作为Item泛型的类型。
3. 最终keyExtractor的post参数类型会同步匹配推断出的Item类型，无需手动定义中间类型。

兼容性提示 #

该特性依赖TypeScript 4.7及以上版本的部分泛型参数推断能力，确保你的项目TS版本符合要求。

内容的提问来源于stack exchange，提问作者Bryan Lumbantobing