React NativeのFlatListのdataに型エラーが出ているとき

はじめに

dataにデータを渡してアプリでも問題なく動いていることを確認してふとみるとdataに赤線が。
どうやら型エラーが出ているようなので、とりあえずググるもみんなrenderItemについての
ことばっかりだったので、解決法を残しておく。

結論

型データに配列宣言が足りない

今回の事例

dataという大本に、characterというデータがある
characterの中にはstatusというデータがある
そして、FlatListで、characterの数だけ表示したい

const characters = useSelector((state: State) => state.data.characters);
<FlatList
  data={characters}
  renderItem={({ item }) => (
    <ListContents
      なんかいろいろ
    />
  )}
  keyExtractor={(item, index) => index.toString()}
/>

そして、このdataに型エラーがでていた。
どうやら配列でいれろとのこと。
しかし、console.logでデータを見てもちゃんと配列が入っている。
はて？

型宣言の間違い

Character型の宣言(Status型が別ファイルに設定されています）

import { Status } from './status';

export type Characters = {
  status: Status;
};

Data型の宣言

import { Characters } from './characters';

export type Data = {
  characters: Characters;
};

おそらく、このあたりに間違いがあるとみていろいろ試した結果、これが正しかった

import { Characters } from './characters';

export type Data = {
  characters: Characters[];   // ←ここでcharacterの配列宣言をする
};

要は、「Data型は複数のCharacterを持つから、配列宣言をしておく」ということらしい。
これが、変更前は「Data型はひとつのCharacterを持つ」という宣言のはずが、FlatListの
dataに入れていたため、そもそも複数ならば配列を入れよ、ということみたい。
これがJSだったら気付かずそのままだったけど、TSのおかげで本当の正しい形が分かったのは
よかったけどたどり着くのに地味に時間がかかった。。