TL; DR
I need to use an High Order Component that can infer type for FlatList
.
e.g.
<CustomFlatList<MyObject> // props/>
explanations:
I decided to create a component with custom injected Props
into any FlatList
s of my app.
I thought an High Order Component was best suited to the situation.
interface InjectedProps { customProps: any;}export const withCustomProps = <T extends object>(Component: React.ComponentType<T>): React.FC<T & InjectedProps> => ({ customProps, ...props }: InjectedProps) => { // a bit of more logic return <Component {...(props as T)} />; };export const CustomFlatList = withCustomProps(FlatList);
But, not really: everything works fine, excepted with typescript
. When I try to strongly type my FlatList
in order to infer the other props methods (such as renderItem
) I`ve got an error:
<CustomFlatList // works// props/>Expected 0 type arguments, but got 1.ts<CustomFlatList<MyObject> // error// props/>
For now, I have no choice but to use any
for the rendering method definition.
renderItem={ ({ item }: { item: any }) => {//whatever} }
I also tried to mimic the syntax of FlatList
-- using two nested generic types (T
and ItemT
)
// React definition of FlatListexport class FlatList<ItemT = any> extends React.Component<FlatListProps<ItemT>>
// My buggy codeexport const withCustomProps = <T extends object, ItemT>(Component: React.ComponentType<T<ItemT>>): React.FC<T & InjectedProps> => ({ customProps, ...props}: InjectedProps) => { return <Component {...(props as T)} />;};export const CustomFlatList = withCustomProps(FlatList);
But I've got yet another typescript
error:
Type 'T' is not generic.
What can I do better?