reactjs - 使用 TypeScript 响应 FlatList

Question

TypeScript 真的很棒，就目前而言，我觉得我为 TypeScript 工作比 TypeScript 更适合我。
我有一个 FlatList，它在旋转木马中呈现餐厅结果。

 const renderRestaurantRows = ({ item }) => (
    <Carousel
      id={item.id}
      name={item.name}
    />
  );
  const renderBottomSheetRestaurantList = () => (
    <View style={[styles.listView, { height: topSnapPoint }]}>
      <FlatList
        data={restaurants}
        keyExtractor={(item) => `row-${item.id}`}
        renderItem={renderRestaurantRows}
      />
    </View>
  );

TypeScript 提示 item与 Binding element 'item' implicitly has an 'any' type - 说得通。所以我试着告诉它会发生什么:

  interface RestaurantItem {
    item: {
      id: string;
      name: string;
    };
  }
  const renderRestaurantRows = ({ item }: RestaurantItem) => (
    <Carousel
      id={item.id}
      name={item.name}
    />
  );

但随后 TS 提示 data={restaurants]与 Type 'Restaurant[]' is not assignable to type 'readonly { id: string; name: string; imageUrl: string; rating: number; reviews: number; }以及大量其他信息。
有人可以分享解决方案并解释将来如何为其他类似案例找到这样的解决方案吗？
更新 restaurants从自定义钩子(Hook)中获取。它被定义为一个 Restaurant 对象数组:

interface Restaurant {
  id: string;
  name: string;
}
export default function useRestaurantSearch() {
  const [restaurants, setRestaurants] = useState<Restaurant[] | null>(null);
  ...

更新 2
伙计们感谢您的评论，按照两个建议，我重写了代码:

import useRestaurantSearch from '../hooks/useRestaurantSearch';
export default function RestaurantPage() {
  const renderRestaurantRows = ({ item }: Restaurant) => (
    <Carousel
      id={item.id}
      name={item.name}
    />
  );
  const renderBottomSheetRestaurantList = () => (
    <View style={[styles.listView, { height: topSnapPoint }]}>
      <FlatList
        data={restaurants}
        keyExtractor={(item) => `row-${item.id}`}
        renderItem={renderRestaurantRows}
      />
    </View>
  );

这次我收到 { item }: Restaurant 的错误与 Cannot find name 'Restaurant' .这并不奇怪，因为 Restaurant 是在外部钩子(Hook)文件 ../hooks/useRestaurantSearch 中定义的。 .我需要以某种方式导入它吗？
更新 3
在玩了几个小时之后，我到了这一点:

  const renderRestaurantRows = (result: { item: Restaurant }) => {
    return <Carousel {...result.item} />;
  };
  const renderBottomSheetRestaurantList = () => (
    <View style={[styles.listView, { height: topSnapPoint }]}>
      <FlatList
        data={restaurants}
        keyExtractor={(item) => `row-${item.id}`}
        renderItem={renderRestaurantRows}
      />
    </View>
  );

renderItem生成一个对象，其中包含 item 下的每个餐厅数据。 key 。例如，对象之一可能是:

{
  "index": 18,
  "item": Object {
    "coordinates": Object {
      "latitude": 123,
      "longitude": -123,
    },
    "id": "dfg987fshjsdfh",
    "name": "Yummy Food",
  },
  "separators": Object {
    "highlight": [Function highlight],
    "unhighlight": [Function unhighlight],
    "updateProps": [Function updateProps],
  },
}

当我通过 result对象，我可以让 TS 知道 item在对象内部并将其转换为 Restaurant 类型。我用(结果:{项目:餐厅}) . However, when I try to directly destructure the 结果 object with ({ item }: 餐厅) it gives me the error 'Restaurant' 类型不存在属性 'item'。知道为什么吗？

Answer 1

尝试导入 ListRenderItem 并输入接收函数的常量:

import { ListRenderItem } from 'react-native';
...
const renderRestaurantRows: ListRenderItem<Restaurant> = ({ item }) => (
  <Carousel
    id={item.id}
    name={item.name}
  />
);

你真正从 renderItems 得到的参数是:

哪里 ItemT是你的类型， Restaurant .