ReactNative+TypescriptでFlatListを使った時につまずいたポイント

FlatListでkeyExtractorに値を割り当てるときに引っかかったのでメモ。

interface Props {
  items: { id: number; title: string }[]
}

<FlatList
 data={items}
 renderItem={({ item }) => <Text>{item.title}</Text>}
 keyExtractor={item => item.id}
/>

このようにkeyExtractorに要素のid(number型)を割り当てたところ以下のメッセージが出た。

[ts]
型 '(item: { id: number; title: string; }) => number' を型 '(item: { id: number; title: string; }, index: number) => string' に割り当てることはできません。
  型 'number' を型 'string' に割り当てることはできません。

keyExtractorにはstring型で一意になる要素を割り当てなければいけないらしい…。

<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  keyExtractor={item => `${item.id}`}
/>

item.idをstring型に変換して解決。