TypeScript React Native Flatlist : How to give renderItem the correct type of it's item?

Question

我正在使用 TypeScript 构建一个 React Native 应用程序。 renderItem 提示被解构的项目隐式具有 any 类型。我用谷歌搜索并找到了 this question并尝试结合 React Native 的 @types 包的 index.d.ts 中的类型来实现他们在这里教授的内容。

export interface Props {
  emotions: Emotion[];
}

class EmotionsPicker extends PureComponent<Props> {
  keyExtractor = (item, index) => index;
  renderItem = ({ item }) => (
    <ListItem title={item.name} checkmark={item.checked} />
  );

  render() {
    return (
      <FlatList<Emotion>
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
        data={this.props.emotions}
      />
    );
  }
}

不幸的是，这不起作用。我怎样才能给项目类型 Emotion？

Answer 1

我知道这是一个老问题，但谷歌搜索它的人可能仍然会喜欢它。

import { FlatList, ListRenderItem } from 'react-native'
/*
.
.
.
*/
  renderItem: ListRenderItem<Emoticon> = ({ item }) => (
    <ListItem title={item.name} checkmark={item.checked} />
  );