Родной плоский список TypeScript React: Как дать renderItem правильный тип элемента?

Question

Я создаю приложение React Native с помощью TypeScript.renderItem жалуется, что неструктурированный элемент неявно имеет тип any.Я гуглил и нашел этот вопрос и попытался реализовать то, чему они учат здесь, в сочетании с типами в index.d.ts пакета @types для React Native.

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

Это потому, что во время определения renderItem TypeScript не может знать, что он должен идти как renderItem опора FlatList.

Если вы пропустили переменную и напрямуюдобавил функцию в реквизит, TypeScript должен уметь правильно ее выводить:

export interface Props {
  emotions: Emotion[];
}

class EmotionsPicker extends PureComponent<Props> {    
  render() {
    return (
      <FlatList<Emotion>
        keyExtractor={(item, index) => index}
        renderItem={({ item }) => <ListItem title={item.name} checkmark={item.checked} />}
        data={this.props.emotions}
      />
    );
  }
}

Answer 2

Я знаю, что это старый вопрос, но люди, которые гуглят его, все равно могут его оценить.

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

Answer 3

Я нашел решение (хотя я не знаю, идеально ли оно):

renderItem = ({ item }: { item: Emotion }) => (
  <ListItem title={item.name} checkmark={item.chosen} />
);