RN FlatList with Typescript and Styled Components

Question

SO community,

I can't figure out the correct type definition for an RN FlatList styled with Styled Components in Typescript

So I have type IProduct like that

interface IProduct {
  id: string;
  name: string;
}

and I define the types for the FlatList like that

<FlatList
  data={products}
  renderItem={({ item }: { item: IProduct }) => (
    <SomeComponent item={item} />
  )}
  keyExtractor={(item: IProduct) => item.id}
/>

everything works fine. Typescript does not complain but as soon as I want to style the FlatList like that

const StyledFlatList = styled.FlatList`
  background-color: 'white';
`;

<StyledFlatList
  data={products}
  renderItem={({ item }: { item: IProduct }) => (
    <SomeComponent item={item} />
  )}
  keyExtractor={(item: IProduct) => item.id}
/>

I get lots of Typescript errors

No overload matches this call.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '({ item }: { item: IProduct; }) => JSX.Element' is not assignable to type 'ListRenderItem<unknown>'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>): 
ReactElement<StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '(item: IProduct) => string' is not assignable to type '(item: unknown, index: number) => string'.ts(2769)

index.d.ts(4218, 5): The expected type comes from property 'keyExtractor' which is declared here on type 'IntrinsicAttributes & Pick<Pick<FlatListProps<unknown> & RefAttributes<FlatList<unknown>>, "ref" | "data" | "style" | "ItemSeparatorComponent" | ... 141 more ... | "key"> & Partial<...>, "ref" | ... 144 more ... | "key"> & { ...; } & { ...; } & { ...; }'

index.d.ts(4218, 5): The expected type comes from property 'keyExtractor' which is declared here on type 'IntrinsicAttributes & Pick<Pick<FlatListProps<unknown> & RefAttributes<FlatList<unknown>>, "ref" | "data" | "style" | "ItemSeparatorComponent" | ... 141 more ... | "key"> & Partial<...>, "ref" | ... 144 more ... | "key"> & { ...; } & { ...; } & { ...; }'

Can someone tell me how to fix that error?

Answer 1

看起来添加typeof到另一个建议的解决方案以更直接的方式解决了这个问题，甚至允许您从道具中排除类型：

const StyledFlatList = (styled.FlatList`
  background-color: 'white';
` as unknown) as typeof FlatList;

<StyledFlatList
  data={products}
  renderItem={({ item }) => (
    <SomeComponent item={item} />
  )}
  keyExtractor={(item) => item.id}
/>

Answer 2

这个简单的解决方案对我有用：

interface IProduct {
  id: string;
  name: string;
}

const StyledFlatList = styled(FlatList as new () => FlatList<IProduct>)`
  background-color: #f7f7f7;
`

Answer 3

经过几次尝试和错误运行后，我想我找到了一个可行的解决方案，但它并不理想。

<StyledFlatList<any>
  data={products}
  renderItem={({ item }: { item: IProduct }) => (
    <ProductCard product={item} onProductPress={handleOnProductPress} />
  )}
  keyExtractor={(item: IProduct) => item.id}
/>

请告诉我您是否同意。

更新1：

如果我添加Ben Clayton建议的代码片段，Prettier 会像这样格式化代码

const StyledFlatList = (styled.FlatList`
  background-color: ${colors.silver};
` as unknown) as FlatList;

我收到一个 TS 错误

JSX element type 'StyledFlatList' does not have any construct or call signatures.

更新2：

<any>我没有按照这里的<React.ElementType>建议进行尝试，这似乎也有效。

<StyledFlatList<React.ElementType>
  data={products}
  renderItem={({ item }: { item: IProduct }) => (
    <ProductCard product={item} onProductPress={handleOnProductPress} />
  )}
  keyExtractor={(item: IProduct) => item.id}
/>