組み込みのジェネリクス｜コードで実践

string[] は Array の略記

ここまで書いてきた配列の型には、もう一つの書き方があります。

const titles: string[] = ["プロフィールサイト", "自己紹介カード"];
const titles2: Array<string> = ["プロフィールサイト", "自己紹介カード"];

この 2 行はまったく同じ意味です。Array は、要素の型を型引数で受け取る組み込みのジェネリック型です。つまり T[] のほうが略記で、正体は Array<T> です。

ふだんは短い string[] を使い、要素の型が長くなるときや、他のジェネリック型と並べて読ませたいときに Array<...> を使います。

もう一つ、必ず出てくるのが Promise です。こちらも型引数を 1 つ取ります。

const p: Promise<number> = Promise.resolve(3);

Promise<number> は、待てば number が取り出せる、という意味です。箱そのものは number ではありません。

await すると中身が出てきます。

const n = await p; // n は number

サーバーから作品一覧を取ってくる関数です。React 実践でそのまま出てくる形です。

async function fetchWorks(): Promise<Work[]> {
  const res = await fetch("/api/works");
  return res.json();
}

async を付けた関数の戻り値は必ず Promise<...> になります。中で返しているのは Work[] でも、外から見た型は Promise<Work[]> です。呼ぶ側は await して初めて Work[] を受け取れます。

const works = await fetchWorks(); // works は Work[]

型引数の中身が答えの形そのものなので、Promise<Work[]> と書いてあれば、待った先に何が来るのかが読むだけで分かります。

演習では、作品の配列から公開中のタイトルだけを取り出す関数を書きます。型は Array<...> の書き方で書いてください。Promise は次のコースで実際に使います。ここでは読めることを目標にします。