web-dev-qa-db-ja.com

TypeScript React Native Flatlist：renderItemにアイテムの正しいタイプを与える方法は？

TypeScriptを使用してReactネイティブアプリを構築しています。 renderItemは、分解されたアイテムに暗黙的にanyタイプがあると不平を言います。私はググって この質問 を見つけて、彼らがここで教えるものをindex.d.tsパッケージの@typesの型と組み合わせて実装しようとしましたReactネイティブ。

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にするにはどうすればよいですか？

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

私は解決策を見つけました（それが理想的であるかどうかはわかりませんが）：

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

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

私はそれが古い質問であることを知っていますが、それをグーグルする人々はまだそれを感謝するかもしれません。

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