09.1 型引数の基本

any との違い

「どんな型でも受け取る関数」を any で書くと、戻り値の型情報も失われます。

// any で書く — 型が消える
function firstAny(items: any[]): any {
	return items[0];
}
const a = firstAny(["x", "y"]);      // a は any（string ではない）

// ジェネリクスで書く — 型が保たれる
function first<T>(items: T[]): T {
	return items[0];
}
const b = first(["x", "y"]);         // b は string

複数の型引数

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

const p = pair("x", 1);      // [string, number]

型にも使える

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

const b1: Box<string> = { value: "x" };
const b2: Box<number> = { value: 1 };

// 実務でよく使う形
type Result<T, E = Error> =
	| { ok: true; value: T }
	| { ok: false; error: E };

E = Error は既定の型引数です。省略すると Error になります。

09.2 extends による制約

「こういう性質を持つ型だけ」

型引数のままでは、その値に対して何もできません。どんな型が来るか分からないためです。

function showLength<T>(x: T) {
	console.log(x.length);
	//            ~~~~~~
	// error TS2339: Property 'length' does not exist on type 'T'.
}

extends で「少なくともこれを持っている」と制約します。

function showLength<T extends { length: number }>(x: T) {
	console.log(x.length);      // OK
}

showLength("abc");            // OK（string は length を持つ）
showLength([1, 2, 3]);        // OK
showLength(42);               // エラー TS2345

keyof と組み合わせる

オブジェクトのキーを型として扱えます。実務で最もよく使うジェネリクスの形です。

function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
	return obj[key];
}

const user = { name: "Alice", age: 30 };

const n = getProp(user, "name");     // string
const a = getProp(user, "age");      // number
const x = getProp(user, "email");
//                      ~~~~~~~
// error TS2345: Argument of type '"email"' is not assignable to
//               parameter of type '"name" | "age"'.
//
// 訳: 型 '"email"' の引数を型 '"name" | "age"' のパラメーターに割り当てることはできません。

動かしてみる

// generics.ts
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
	return obj[key];
}

function groupBy<T, K extends string>(items: T[], toKey: (item: T) => K): Record<K, T[]> {
	const out = {} as Record<K, T[]>;
	for (const item of items) {
		const k = toKey(item);
		(out[k] ??= []).push(item);
	}
	return out;
}

const user = { name: "Alice", age: 30 };
console.log(getProp(user, "name"));

const words = ["apple", "avocado", "banana"];
console.log(groupBy(words, (w) => w[0]));

$ npx tsx generics.ts
Alice
{ a: [ 'apple', 'avocado' ], b: [ 'banana' ] }

09.3 推論が効く場面・効かない場面

引数から決まるなら書かなくてよい

function first<T>(items: T[]): T { return items[0]; }

first([1, 2, 3]);            // T は number と推論される
first<number>([1, 2, 3]);    // 書いてもよいが冗長

引数に現れない型引数は推論できない

function parse<T>(json: string): T {
	return JSON.parse(json);
}

const user = parse('{"name":"Alice"}');    // T は unknown になる
const u2 = parse<User>('{"name":"Alice"}'); // 明示すれば通る

推論を助ける書き方

// 引数の位置に型引数を出すと推論できる
function fill<T>(length: number, value: T): T[] {
	return Array.from({ length }, () => value);
}

fill(3, "x");        // string[] と推論される

const 型引数

リテラル型として推論させたいときに使います。

function toList<const T>(items: readonly T[]): readonly T[] {
	return items;
}

const a = toList(["x", "y"]);        // readonly ("x" | "y")[]
// const 修飾がなければ readonly string[] になる

09.4 Java・C# のジェネリクスとの違い

実行時に型引数は残らない

function create<T>(): T {
	return new T();      // 書けない。T は実行時に存在しない
	//         ~
	// error TS2693: 'T' only refers to a type, but is being used as a value here.
}

function create<T>(ctor: new () => T): T {
	return new ctor();
}

class User { name = ""; }
const u = create(User);      // User

変性 — 引数の型は逆向きに働く

この節は読んで意味が分かれば十分です。自分で書く必要はほとんどありません。

type Animal = { name: string };
type Dog = { name: string; bark(): void };

// 戻り値は「狭い型」を返す関数を渡せる（共変）
type GetAnimal = () => Animal;
const g: GetAnimal = (): Dog => ({ name: "ポチ", bark() {} });   // OK

// 引数は「広い型」を受け取る関数を渡せる（反変）
type HandleDog = (d: Dog) => void;
const h: HandleDog = (a: Animal) => console.log(a.name);         // OK

まとめて比較する