こんにちは！TypeScriptの型システムの世界へようこそ。
日々フロントエンドからバックエンドまでコードを書いていると、「もう少し型をスマートに書けないかな？」と思う瞬間がありますよね。
他のプログラニング言語（JavaやC#など）を触ったことがある方なら、「ジェネリクス（総称型）」という言葉はお馴染みかもしれません。TypeScriptでもこのジェネリクスはコードの再利用性を高めるための強力な武器です。
今回は、そのジェネリクスに「デフォルト型引数（Default Type Parameters）」を設定するテクニックを深掘りしていきましょう。ライブラリ開発はもちろん、日々のアプリケーション開発でもボイラープレート（お決まりのコード）を劇的に減らせる必須の知見です。
ここをクリアすれば、TypeScriptの型設計の引き出しがグッと広がりますよ。一緒にマスターしていきましょう！
—
1. ジェネリクスのデフォルト型引数ってなに？
まずは基本の「おさらい」から。
TypeScriptでインターフェースを定義するとき、型をパラメータ化（変数化）するために `
例えば、APIから受け取るレスポンスデータを扱うインターフェースを考えてみましょう。
// 型引数 T を持つインターフェース
interface ApiResponse
data: T;
status: number;
message: string;
}
このインターフェースを使うとき、私たちは必ず「`T` には何の型が入るか」を明示してあげる必要があります。
// ユーザー情報を取得する場合
const userResponse: ApiResponse<{ id: number; name: string }> = {
data: { id: 1, name: ‘Taro’ },
status: 200,
message: ‘Success’,
};
毎回 `<...>` で具体的な型を渡すのは、データ構造が決まっている標準的なケースでは少し面倒ですよね。「大半のケースではこの型でいいんだけど、特別な時だけ変えたい」――そんなワガママを叶えてくれるのが、デフォルト型引数です。
デフォルト値の書き方
JavaScriptの関数のデフォルト引数（例: `function(x = 10)`）と全く同じ感覚で、型引数にも `=` を使ってデフォルトの型を指定できます。
// デフォルト型引数として { id: string } を指定
interface ApiResponse
data: T;
status: number;
message: string;
}
このように定義しておくと、利用側で型指定を完全に省略できるようになります。
—
2. 具体例で体感する：デフォルト型引数の恩恵
百聞は一見にしかず。実際のコードで、デフォルト型引数がある場合とない場合の「使い心地」を比較してみましょう。
シナリオ：汎用的な「ページネーション付きリスト」の設計
Webアプリケーションを作っていると、リスト表示のデータ構造は何度も登場しますよね。
// 1. デフォルト型引数を持たせたインターフェース
interface PaginatedResponse
items: T[];
totalCount: number;
currentPage: number;
hasNextPage: boolean;
}
ここで `T = any`（あるいはより安全に `T = Record
ケースA：型を省略して、デフォルトに頼る場合
「細かい中身の型はまだ厳密に決めたくない、または一般的なオブジェクトの配列としてサクッと扱いたい」というときは、型引数を書かずにそのまま使えます。
// 型引数を省略！デフォルトの T = any が適用されます
const defaultList: PaginatedResponse = {
items: [{ id: 1, name: ‘apple’ }, { id: 2, name: ‘banana’ }],
totalCount,
currentPage: 1,
hasNextPage: true,
};
// コンパイルエラーにならず、スムーズに書き始められます
console.log(defaultList.items);
ケースB：特定の型をしっかり当てはめる場合
もちろん、厳密な型安全性が欲しいときは、これまで通り型を渡して上書きできます。
interface User {
id: number;
username: string;
}
// T に User を明示的に渡す
const userList: PaginatedResponse
items: [{ id: 1, username: ‘taro_ts’ }],
totalCount: 1,
currentPage: 1,
hasNextPage: false,
};
// items[0] は User 型として完璧に推論される
userList.items[0].username; // OK!
このように、「普段は楽をさせてくれて、本気を出したい（厳密にしたい）ときには型を上書きできる」という柔軟性を持たせるのが、優れた型設計のコツです。
—
3. 陥りやすい罠：デフォルト型引数の順序ルール
ここで、TypeScriptの型システムにおける重要なルール（制約）を一つお伝えしておきます。
関数やクラス、インターフェースで複数の型引数を持つとき、「デフォルト値を持つ型引数は、デフォルト値を持たない型引数の『後ろ』に置かなければならない」というルールがあります。
❌ やってはいけない書き方（コンパイルエラー）
// エラー: デフォルト値を持つ型 T が、持たない型 U の前に来ている
interface BadConfig
key: T;
value: U;
}
TypeScriptのコンパイラは、左側から順に型引数を推論・解決していきます。もし左側にデフォルト値があると、右側に渡される型との整合性が取れなくなり、型推論のエンジンが混乱してしまうため、これは言語仕様として禁止されています。
⭕ 正しい書き方
// 正解: デフォルト値を持たない必須の型を左に、デフォルト値を右に置く
interface GoodConfig
key: T;
value: U;
}
// 使うときはこうなります
const config: GoodConfig
key: ‘name’, // T はデフォルトの string になる
value: 42, // U は明示的に指定した number になる
};
「デフォルトはいつも一番右側に控えてもらう」と覚えておけば、このエラーに悩まされることはありませんよ。
—
4. 実戦で役立つ！高度なテクニック：条件付き型との組み合わせ
もう少しステップアップして、実務でライブラリを設計する際によく使われるテクニックをご紹介します。
例えば、「特定の型を受け取るけれど、もし指定されなかったら `unknown` にフォールバックさせつつ、制約（Constraints）をかけたい」というケースです。
// T は必ず何らかのオブジェクトであることを強制しつつ、
// 指定がなければ Record
interface APIPayload
payload: T;
timestamp: number;
}
// 1. 型を省略した場合
const payload1: APIPayload = {
payload: { foo: ‘bar’ }, // オブジェクトであればOK
timestamp: Date.now(),
};
// 2. プリミティブ型を渡そうとすると…？
// const payload2: APIPayload
// ❌ エラー！ ‘string’ は ‘object’ 型の制約を満たしていません。
このように `extends` による型制約とデフォルト型引数を組み合わせることで、「安全な範囲内で自由度を持たせる」という極めて堅牢なAPI設計が可能になります。
—
まとめ
いかがでしたでしょうか？ 今回はインターフェースのジェネリクスにおける「デフォルト型引数」について解説しました。
- デフォルト型引数の基本：`interface Foo
` のように書き、利用時の型指定を省略できるようにする。 - メリット：普段はシンプルな記述で済ませつつ、必要なときだけ厳密な型に上書きできる柔軟性を持たせられる。
- 注意点：デフォルト値を持つ型引数は、必ず右側（最後尾）に配置する。
- 応用：`extends` による型制約と組み合わせることで、型の安全性と利便性を高次元で両立できる。
ここをクリアできれば、あなたもTypeScriptの型システムの仕組みをかなり深く理解できている証拠です。日々の開発でぜひ、ご自身の書くインターフェースに取り入れてみてくださいね。
それでは、次のステップでも一緒に楽しくTypeScriptを極めていきましょう！