こんにちは!フルスタックエンジニアの先輩です。
TypeScriptの学習、順調に進んでいますか?
「any型を卒業して、少しずつ型安全なコードが書けるようになってきた!」
「でも、オブジェクトの引数を受け取るときに、『特定のプロパティを持っているオブジェクトだけを受け入れたい』と思ったとき、どう型を付ければいいんだろう……?」
そんな疑問を持ったことはありませんか?実はそこをクリアすると、TypeScriptの型システムがぐっと面白くなり、あなたのコードは「堅牢で美しい芸術品」に生まれ変わります。
今回は、関数型における「ジェネリクス制約(Generics Constraints)」を使った、引数の型レベルでのバリデーションテクニックを一緒にマスターしていきましょう!
ここを理解できれば、TypeScriptの基本はバッチリマスターできたも同然ですよ。ぜひ最後までついてきてくださいね。
—
1. なぜ「普通のオブジェクト型」では物足りないのか?
まずは、よくある初学者のつまずきポイントから見ていきましょう。
例えば、「`id`プロパティを持っているオブジェクト」を受け取って、何か処理をする関数を作りたいとします。
素朴に考えると、こう書きたくなりますよね。
// 普通のオブジェクト型(構造の部分一致)を指定する例
function printId(item: { id: number }) {
console.log(`ID is: ${item.id}`);
}
// これはOK
printId({ id: 1, name: “Taro” });
// エラーになる(nameしかないため)
// printId({ name: “Jiro” });
一見これでうまくいっているように見えますが、ここに「受け取ったオブジェクトの、他のプロパティも保持したまま返却したい(または処理したい)」という要件が加わると、途端に壁にぶつかります。
例えば、引数に渡されたオブジェクトの型が、関数を通すことで `{ id: number }` という「削ぎ落とされた型」に抽象化されてしまうのです。元のオブジェクトが持っていた `name` や `age` といった固有のプロパティ情報が、関数の戻り値や内部処理で扱えなくなって困ったことはありませんか?
「引数の構造をバリデーションしつつ、具体的な型情報(元の形状)を完全に維持したい!」
そんなワガママを叶えてくれるのが、ジェネリクス制約なんです。
—
2. ジェネリクス制約(`extends`)の基本構造
ジェネリクス(総称型)を使うと、関数に渡された実際の型を「変数」のように保持することができます。さらに `extends` キーワードを使うことで、「この型変数であるTは、最低限この構造を持っていてね」という「制約(バリデーション)」をかけることができます。
イメージ図で構造を確認してみましょう。
[ジェネリクス制約のイメージ]
T (実際の型: { id: number, name: string, age: number })
▲
│ 「T は最低限 { id: number } を持っていなければならない」という制約
│ (extends)
└─ { id: number } (ベースとなる最小限の構造)
実際のコードで書き方を見てみましょう。
// T という型変数に、「最低限 { id: number } を持っていなければならない」という制約を課す
function processItem
console.log(`処理中… ID: ${item.id}`);
return item; // 入ってきた型のまま返す!
}
// 使用例
const user = { id: 42, name: “Hanako”, role: “admin” };
// 戻り値の型は { id: number; name: string; role: string; } のまま保持される!
const result = processItem(user);
console.log(result.role); // ちゃんと補完が効いて “admin” が取れる!
すごいですね!`T extends { id: number }` と書くことで、TypeScriptのコンパイラは次のようなチェックと恩恵をもたらしてくれます。
1. コンパイル時のバリデーション: `id` を持たないオブジェクトを関数に渡そうとすると、容赦なくコンパイルエラー(赤線)を出して実行時エラーを未然に防ぎます。
2. 型の完全維持: 渡したオブジェクトの固有のプロパティ(`name` や `role` など)を消すことなく、そのまま型として保持してくれます。
—
3. 実践!複数の制約とオプショナル引数を組み合わせる
実務では、もう少し複雑なオブジェクトを扱うことが多いはずです。
例えば、「`title` は必須だけど、`description` はあってもなくてもいい(オプショナル)」というオブジェクトを受け取る関数を考えてみましょう。
ここでは、オプショナル引数(`?`)とジェネリクス制約を組み合わせた、より実践的なコードを書いてみます。
// 最低限 `title: string` を持っていることを制約にする
interface BaseTask {
title: string;
}
// ジェネリクス制約を使ったタスク処理関数
function handleTask
console.log(`タスク「${task.title}」を実行します。`);
if (options?.urgent) {
console.log(“【優先対応】”);
}
// 元のオブジェクトの型 T に、新しいプロパティを合成して返す
return {
…task,
processedAt: new Date(),
};
}
// — テストケース —
// 1. 成功ケース:titleとdescriptionを持つオブジェクト
const taskA = handleTask(
{ title: “TypeScriptの勉強”, description: “ジェネリクスを極める” },
{ urgent: true }
);
// taskA の型は { title: string; description: string; } & { processedAt: Date; } になる!
console.log(taskA.description); // 補完が効く!
console.log(taskA.processedAt); // 処理時刻も取れる!
// 2. 失敗ケース(コンパイルエラーになる)
// handleTask({ description: “タイトルがないよ” });
// ❌ 2行目のエラー: Argument of type ‘{ description: string; }’ is not assignable to parameter of type ‘BaseTask’.
// Property ‘title’ is missing in type ‘{ description: string; }’ but required in type ‘BaseTask’.
コードの解説とここがポイント!
- `T extends BaseTask`: 引数に渡されるオブジェクトが、必ず `title` プロパティを持っていることを型レベルで保証しています。もし持っていなければ、コードを書いている段階でエディタが赤く教えてくれます。
- `T & { processedAt: Date }`: 戻り値の型に注目してください。元々ユーザーが渡したオブジェクトの型(`T`)に、関数側で付与した処理日時(`processedAt`)の型を交差型(Intersection Type `&`)で合体させて返しています。これにより、情報の損失が一切ありません。
—
4. 陥りやすい文法エラーと注意点
初学者のうちによくやってしまうミスをいくつか紹介しておきますね。ここで先回りして知っておけば安心です。
ミス1: 制約(`extends`)を書き忘れて、ただの `any` やジェネリクスにしてしまう
// ❌ 良くない例:制約がないため、どんな値でも入ってきてしまい、内部で .id を触ろうとすると怒られる
function badFunc
// return item.id; // Error: Property ‘id’ does not exist on type ‘T’.
}
解決策: 必ず `
ミス2: `extends` をクラスの継承と勘違いする
JavaScript/TypeScriptのクラスの `extends`(継承)と、ジェネリクスの `extends`(制約)は、キーワードは同じですが意味が異なります。
ジェネリクスの `extends` は、「〜の部分型(サブタイプ)であること(=その構造を内包していること)」を意味します。クラスを継承していなくても、オブジェクトの構造(シェイプ)さえ合致していればパスします(これがTypeScriptの「構造的型付け」の素晴らしいところです!)。
—
まとめ
いかがでしたでしょうか?
今回は、関数型におけるジェネリクス制約を用いた引数の型レベルでのバリデーションについて解説しました。
- 普通のオブジェクト型を指定すると、渡したオブジェクトの固有の型情報が削ぎ落とされてしまう。
- ジェネリクス制約 (`
`) を使えば、最低限必要なプロパティを型レベルでチェックしつつ、オブジェクトの元の型情報を完全に維持できる。 - コンパイル時にエラーを検知できるため、実行時エラーの心配がいらない堅牢なコードが書ける。
ここをクリアできれば、もうTypeScriptの型システムの基本で迷うことはありません。自信を持って、さらに高度な型パズルやアーキテクチャ設計に挑戦していってくださいね。
あなたのTypeScriptライフがより素晴らしいものになりますように。それでは、また次の記事でお会いしましょう!