CHAPTER 8 · 3 lessons · 39問

非同期と API に型をつける

`Promise<T>` の戻り値型、API レスポンスの型定義、`unknown` で受け取った安全な絞り込み。

0 / 39 問クリア

JavaScript コースで async / await を学んだよね。TypeScript ではその戻り値に Promise<T> と書く。待った結果の型が山かっこに入るだけで、書き方は変わらない。

この章ではもう一歩進んで、サーバーから来るデータの形を型で定義するところまでやるよ。interface TodoItem { id: number; title: string; done: boolean } のように書いておけば、プロパティを打ちまちがえたときにすぐ分かる。

そして最後に、何が来るか分からないデータを安全に扱う方法。unknown で受け取って、typeof で確かめてから使う。any と違って、確かめないと何もできないのが unknown のよいところだ。

ここが書けると、フェーズ4の「待って・受け取って・画面に出す」を型安全にやる土台がそろうよ。

この章のレッスン

Promise に型をつける

  1. 34Promise と async に型をつけるasync 関数の戻り値は Promise<T>。待った結果の型を山かっこに書こう。問題へ

レスポンスの型を定義する

  1. 35API レスポンスの型を定義するサーバーから来るデータの「形」を interface で書こう。打ちまちがいがその場で分かる。問題へ

unknown で安全に受け取る

  1. 36unknown で受け取って絞り込む「何が来るか分からない」データは unknown で受けて、型ガードで確かめてから使う。問題へ

つぎは「状態を型で設計する」。Loading / Empty / Error / Success — 画面の4状態をタグ付きユニオンで表現し、取りこぼしを型で防ぐ。