組み込みのジェネリクス
string[] は Array の略記
ここまで書いてきた配列の型には、もう一つの書き方があります。
TypeScript
const titles: string[] = ["プロフィールサイト", "自己紹介カード"];
const titles2: Array<string> = ["プロフィールサイト", "自己紹介カード"];この 2 行はまったく同じ意味です。Array は、要素の型を型引数で受け取る組み込みのジェネリック型です。つまり T[] のほうが略記で、正体は Array<T> です。
ふだんは短い string[] を使い、要素の型が長くなるときや、他のジェネリック型と並べて読ませたいときに Array<...> を使います。
Promise は「あとで中身が入る箱」
もう一つ、必ず出てくるのが Promise です。こちらも型引数を 1 つ取ります。
TypeScript
const p: Promise<number> = Promise.resolve(3);Promise<number> は、待てば number が取り出せる、という意味です。箱そのものは number ではありません。
await すると中身が出てきます。
TypeScript
const n = await p; // n は numberfetch の戻り値を読み解く
サーバーから作品一覧を取ってくる関数です。React 実践でそのまま出てくる形です。
TypeScript
async function fetchWorks(): Promise<Work[]> {
const res = await fetch("/api/works");
return res.json();
}async を付けた関数の戻り値は必ず Promise<...> になります。中で返しているのは Work[] でも、外から見た型は Promise<Work[]> です。呼ぶ側は await して初めて Work[] を受け取れます。
TypeScript
const works = await fetchWorks(); // works は Work[]型引数の中身が答えの形そのものなので、Promise<Work[]> と書いてあれば、待った先に何が来るのかが読むだけで分かります。
手を動かす
演習では、作品の配列から公開中のタイトルだけを取り出す関数を書きます。型は Array<...> の書き方で書いてください。Promise は次のコースで実際に使います。ここでは読めることを目標にします。
要件
- 引数と戻り値の型を
Array<...>の書き方で書く - 組み立て用の配列にも型を書く
publishedが true の作品のタイトルだけを、元の並び順のまま返すanyは使わない
入出力例
publishedTitles([{"published":true,"title":"プロフィールサイト"},{"published":false,"title":"自己紹介カード"},{"published":true,"title":"スキル一覧の表"}]) → ["プロフィールサイト","スキル一覧の表"]
publishedTitles([{"published":true,"title":"プロフィールサイト"},{"published":true,"title":"自己紹介カード"}]) → ["プロフィールサイト","自己紹介カード"]
publishedTitles([{"published":false,"title":"下書きメモ"}]) → []
publishedTitles([]) → []
publishedTitles([{"published":false,"title":"自己紹介カード"},{"published":true,"title":"スキル一覧の表"}]) → ["スキル一覧の表"]ヒント
編集 ゆめさく編集部