web-dev-qa-db-fra.com

TypeScript React Flatlist native: comment donner à renderItem le type correct de son élément?

Je construis une application React Native avec TypeScript. renderItem se plaint que l'élément déstructuré a implicitement un type any. J'ai googlé et trouvé cette question et essayé d'implémenter ce qu'ils enseignent ici combiné avec les types dans index.d.ts du @types package pour 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}
      />
    );
  }
}

Malheureusement ça ne fonctionne pas. Comment puis-je donner à l'élément le type Emotion?

typescriptobjectreact-nativetypescript-typingsreact-native-flatlist
5
J. Hesters

J'ai trouvé une solution (même si je ne sais pas si elle est idéale):

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

En effet, au moment où renderItem est défini, TypeScript n'a aucun moyen de savoir qu'il est censé se présenter comme le renderItem prop de FlatList.

Si vous aviez ignoré la variable et déplacé directement la fonction dans l'accessoire, TypeScript devrait pouvoir l'inférer correctement:

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}
      />
    );
  }
}
9
Madara's Ghost

Je sais que c'est une vieille question, mais les gens qui la recherchent peuvent l'apprécier.

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