如何为封装FlatList的forwardRef添加正确TypeScript类型？

你之前的写法问题在于直接给forwardRef添加泛型参数，但forwardRef本身的类型系统不支持这种直接传递泛型到外层的方式。正确的做法是把泛型逻辑放在forwardRef接收的渲染函数内部，再通过类型断言或拆分定义来保留泛型能力。

正确写法示例1（推荐） #

import { FlatList as RNFlatList, FlatListProps, forwardRef } from 'react-native';
import React from 'react';

export const FlatList = forwardRef(function <ItemT = any>(
  props: FlatListProps<ItemT>,
  ref: React.Ref<RNFlatList<ItemT>>
) {
  // 这里编写你处理列宽一致的自定义逻辑
  return <RNFlatList {...props} ref={ref} />;
}) as <ItemT = any>(props: FlatListProps<ItemT> & { ref?: React.Ref<RNFlatList<ItemT>> }) => React.ReactElement;

正确写法示例2（拆分定义） #

如果觉得上面的写法过于紧凑，可以拆分组件定义：

import { FlatList as RNFlatList, FlatListProps, forwardRef } from 'react-native';
import React from 'react';

// 先定义带泛型的核心组件函数
function FlatListComponent<ItemT = any>(
  props: FlatListProps<ItemT>,
  ref: React.Ref<RNFlatList<ItemT>>
) {
  // 自定义列宽处理逻辑
  return <RNFlatList {...props} ref={ref} />;
}

// 用forwardRef包装后导出
export const FlatList = forwardRef(FlatListComponent);

使用方式 #

封装完成后，你可以像使用原生FlatList一样指定泛型类型，同时ref的类型会自动匹配：

// 示例：指定ItemT为自定义类型
type MyListItem = { id: string; name: string };

<FlatList<MyListItem>
  data={[{ id: '1', name: 'test' }]}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  ref={(ref) => { /* ref的类型自动推导为RNFlatList<MyListItem> */ }}
/>

内容的提问来源于stack exchange，提问作者Archimedes Trajano