APIレスポンスに型をつける 外から来るデータを信用しない

ここまでのコードには、ごまかしがひとつあります。

const data = await response.json();
setPosts(data);

この data、型は何でしょうか。エディタで data にカーソルを載せると、正体が見えます——any。「何でもあり」を意味する、TypeScriptの見張り番(React教材チャプター4)が仕事を放棄した状態です。

なぜany になるのか。理由は考えてみれば当然で、JSONの中身が何かは、実行して受け取るまで誰にも分からないからです。TypeScriptはコードを書いている時点の見張り番。ネットの向こうから何が届くかまでは、見張れません。response.json() の戻り値が Promise<any> になっているのは、TypeScriptの「そこは私には保証できません」という正直な返答なのです。

anyの何が怖いか

anyは、エラーを出さないことが怖いのです。

const data = await response.json();
console.log(data.titel);   // ← タイポ(title→titel)。でも赤線が出ない!

見張り番が寝ているので、存在しないプロパティに触っても、コンパイルは素通り。エラーは実行時に、画面が undefined だらけになって初めて発覚します。せっかくチャプター4〜5で型を学んだのに、アプリの一番の玄関口(API)が無検問——これを塞ぐのが今日の仕事です。

手順①: 実物のJSONを見て、型を書き起こす

APIの型定義は、想像で書くものではありません。実物を見て、写すものです。手順はこうです。

まず、ブラウザでAPIのURLを開く(チャプター3でやりましたね)。実物のJSONを観察します。

{
  "id": 1,
  "title": "sunt aut facere...",
  "body": "quia et suscipit...",
  "userId": 1
}

次に、見えた形をそのままtypeに写します。文字列なら string、数値なら number——