ジェネリクスの読み方(Array<T>, Promise<T>)

<T> は「中身の型を差し込む穴」

TypeScriptのコードを読むと Array<string> や Promise<User> のように、山かっこ <> の付いた型をよく見ます。この <> の中身は「後から差し込む型」を表し、この仕組みをジェネリクスと呼びます。まずは書く側ではなく、読める側になることを目標にします。

Array<T> は「T という型の値が並んだ配列」を意味します。T の部分に実際の型を入れると、中身が何の配列かが決まります。string[] という書き方は Array<string> と同じ意味です。

// どちらも「文字列の配列」を表す。同じ意味
let names1: Array<string> = ["a", "b"];
let names2: string[] = ["a", "b"];

// 数値の配列
let scores: Array<number> = [80, 95];

// ユーザーの配列(User は自分で定義した型のイメージ)
// let users: Array<User> = [...];

非同期処理でよく出るのが Promise<T> です。Promise は「今すぐには結果が無いが、あとで T 型の値が得られる約束」を表します。await を付けると、その中身の T が取り出せます。async や await と一緒に必ず登場します。

// getUser は「あとで User が得られる約束」を返す
async function getUser(): Promise<User> {
  const res = await fetch("/api/user");
  return res.json();
}

// await すると Promise<User> の中身 User が取り出される
const user: User = await getUser();

type User = { id: number; name: string };

1. Array<T> は「T が並んだ配列」。string[] と Array<string> は同じ
2. Promise<T> は「あとで T が得られる約束」。await で中身の T を取り出す
3. <> の中身は「差し込まれた型」だと読む。まずは読めれば十分

const users = await getUsers(); // Promise<User[]>
console.log(users.name); // エラー: 配列に name は無い

const users = await getUsers(); // User[]
console.log(users[0].name); // OK