2

问题：

我需要使用可以推断类型的高阶组件FlatListwith typescript。

<CustomFlatList<MyObject> 
// props
/>

我怎样才能做到没有错误？

解释：

我决定创建一个自定义注入到我的应用程序的Props任何组件的组件。FlatList

我认为高阶组件最适合这种情况。

// my code so far

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);

但是，并非如此：一切正常，除了typescript. 当我尝试强输入 myFlatList以推断其他道具方法（例如renderItem）时，出现错误：

<CustomFlatList // works
// props
/>



<CustomFlatList<MyObject> // Expected 0 type arguments, but got 1
// props
/>

目前，我别无选择，只能any用于渲染方法定义。

renderItem={ ({ item }: { item: any }) => {//whatever} }

我还尝试模仿FlatList-- 使用两个嵌套的泛型类型 (T和ItemT)的语法

// React definition of FlatList
export class FlatList<ItemT = any> extends React.Component<FlatListProps<ItemT>>

// My buggy code
export 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);

但我还有另一个typescript错误：

Type 'T' is not generic.
4

0 回答 0