TypeScript：ジェネリクス入門

出力2行。1 / a

function first(arr: T[]): T | undefined { return arr[0]; } と書く。

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

console.log(first([1, 2, 3]));
console.log(first(["a", "b"]));

T は呼び出すときに決まる。数値配列を渡せば T は number、文字列配列なら string になり、戻り値の型もそれに追随する。

解答 == B

any を使うと戻り値の型はどうなるか。

B

any は戻り値も any になり、その後の処理で型チェックが効かなくなる。ジェネリクスなら「入れた型がそのまま出てくる」ので安全性が保たれる。

出力 == 1,a

function swap(a: A, b: B): [B, A] { return [b, a]; } と書く。

function swap<A, B>(a: A, b: B): [B, A] {
  return [b, a];
}

console.log(swap("a", 1).join(","));

型引数は複数書ける。戻り値で順序を入れ替えていることも、型として [B, A] と正確に表現されている。

function last<____>(arr: T[]): T | undefined {
  return arr[arr.length - 1];
}

console.log(last([1, 2, 3]));

出力 == 3

型引数の名前。慣習的に使われる大文字1文字。

T

T という名前に特別な意味はない。Type の頭文字を取った慣習で、<Item> のような分かりやすい名前でも構わない。

解答 == B

extends は制約を表す。

B

文字列や配列は length を持つので渡せるが、数値は渡せない。制約を付けることで、T に対して安全に x.length が使えるようになる。

出力2行。abcde / 1,2,3

と制約を付けると、a.length が使える。

function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

console.log(longest("abcde", "abc"));
console.log(longest([1, 2], [1, 2, 3]).join(","));

制約が無ければ a.length でエラーになる。「T は length を持つ」と伝えることで、初めてそのプロパティが使える。

function size<T ____ { length: number }>(x: T): number {
  return x.length;
}

console.log(size("hello"));

出力 == 5

「〜を満たす」を意味する7文字のキーワード。継承と同じ単語。

extends

ジェネリクスの extends は「継承」ではなく「制約」を意味する。「この条件を満たす型だけを受け付ける」という指定になる。

解答 == B

T に number を指定している。

B

型引数に具体的な型を渡すと、その型で置き換わる。Box<string> なら value は string になる。

出力2行。数値：42 / 文字：あ

type Box = { value: T; label: string }; と定義し、Box と Box を作る。

type Box<T> = {
  value: T;
  label: string;
};

const numBox: Box<number> = { value: 42, label: "数値" };
const strBox: Box<string> = { value: "あ", label: "文字" };

console.log(`${numBox.label}：${numBox.value}`);
console.log(`${strBox.label}：${strBox.value}`);

型そのものを部品化できる。同じ構造で中身の型だけ違うデータを、1つの型定義で表現できる。

出力 == 1件,2件,3件

function mapAll(arr: T[], fn: (item: T) => U): U[] と書く。

function mapAll<T, U>(arr: T[], fn: (item: T) => U): U[] {
  return arr.map(fn);
}

console.log(mapAll([1, 2, 3], (n) => `${n}件`).join(","));

入力の型 T と出力の型 U を別々に表現している。標準の map もこれと同じ仕組みで型が付いており、JS09で使ったメソッドの内側が見えてくる。

出力2行。20 / 0

function at(arr: T[], index: number, fallback: T): T と書く。範囲外なら fallback を返す。

function at<T>(arr: T[], index: number, fallback: T): T {
  return arr[index] ?? fallback;
}

console.log(at([10, 20, 30], 1, 0));
console.log(at([10, 20, 30], 99, 0));

既定値の型も T なので、配列と違う型を渡そうとするとエラーになる。数値配列に文字列の既定値、という不整合が起きない。

出力2行。10 / なし

type Result = { kind: "ok"; data: T } | { kind: "err"; message: string }; と定義する。

type Result<T> =
  | { kind: "ok"; data: T }
  | { kind: "err"; message: string };

function unwrap<T>(r: Result<T>, fallback: T): T {
  return r.kind === "ok" ? r.data : fallback;
}

console.log(unwrap<number>({ kind: "ok", data: 10 }, 0));
console.log(unwrap<string>({ kind: "err", message: "失敗" }, "なし"));

TS09のタグ付きユニオンをジェネリックにした形。どんな型のデータでも、同じ成功/失敗の仕組みで扱える——実務のAPIラッパーはこの形が定番。

出力2行。1,2,3 / a,b

Set を使うと簡潔に書ける。[...new Set(arr)] で重複が消える。

function unique<T>(arr: T[]): T[] {
  return [...new Set(arr)];
}

console.log(unique([1, 2, 2, 3, 1]).join(","));
console.log(unique(["a", "b", "a"]).join(","));

型が違っても処理は同じ——まさにジェネリクスが活きる場面。any で書けば動くが、戻り値が any[] になり、その後の処理で型が守られなくなる。

出力 == PC:2, 周辺機器:1

戻り値の型は Record。ループで加算していく。

function countBy<T>(arr: T[], key: (item: T) => string): Record<string, number> {
  const result: Record<string, number> = {};

  for (const item of arr) {
    const k = key(item);
    result[k] = (result[k] ?? 0) + 1;
  }

  return result;
}

const products = [
  { name: "ノートPC", category: "PC" },
  { name: "マウス", category: "周辺機器" },
  { name: "モニター", category: "PC" },
];

const counts = countBy(products, (p) => p.category);

console.log(
  Object.entries(counts)
    .map(([k, v]) => `${k}:${v}`)
    .join(", ")
);

キーの取り出し方を関数として外から渡しているので、どんなデータでも集計できる。Record<string, number> は「文字列をキーに数値を持つオブジェクト」を表す型。

出力2行。マウス / 該当なし

と制約を付ける。find の結果は undefined になりうる。

function findById<T extends { id: number }>(
  items: T[],
  id: number
): T | undefined {
  return items.find((item) => item.id === id);
}

const products = [
  { id: 1, name: "ノートPC" },
  { id: 2, name: "マウス" },
];

for (const id of [2, 99]) {
  const found = findById(products, id);
  console.log(found?.name ?? "該当なし");
}

制約により id を持たない型は渡せない。それでいて戻り値は元の型そのまま（Product）なので、found.name のように固有のプロパティにアクセスできる。