Question

SO社区

我无法为使用Typescript中的样式化组件样式化的RN FlatList找出正确的类型定义

所以我像这样输入interface IProduct { id: string; name: string; }

FlatList

然后我像这样定义<FlatList data={products} renderItem={({ item }: { item: IProduct }) => ( <SomeComponent item={item} /> )} keyExtractor={(item: IProduct) => item.id} />的类型

FlatList

一切正常。 Typescript不会抱怨，但是我想像这样对const StyledFlatList = styled.FlatList` background-color: 'white'; `; <StyledFlatList data={products} renderItem={({ item }: { item: IProduct }) => ( <SomeComponent item={item} /> )} keyExtractor={(item: IProduct) => item.id} />进行样式设置

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"> & { ...; } & { ...; } & { ...; }'

我遇到很多Typescript错误

play-services-ads:16.0.0

有人可以告诉我如何解决该错误吗？

Answer 1

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

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

经过几次反复试验，我认为我找到了一个可行的解决方案，但这并不理想。

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

让我知道您的情况是否可以。

更新1：

如果我添加建议的代码段Ben Clayton，则漂亮的代码将像这样格式化

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：

我没有按照建议的here尝试<any>，而是尝试了<React.ElementType>。

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

Answer 3

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

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

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

带有打字稿和样式化组件的RN FlatList

3 个答案: