こんにちは！TypeScriptの世界へようこそ。
フロントエンドからバックエンドまで、型安全なコードを書く楽しさに魅せられている仲間として、今日も熱い知見をお届けしますね。
さて、TypeScriptを使い始めると、「ある引数の値によって、別の引数や戻り値の型をガラリと変えたい」という場面に出くわしますよね。例えば、「モードが `’json’` のときはパース済みのオブジェクトを返し、`’text’` のときは文字列を返す」といった具合です。
今回は、この「引数の依存関係」をジェネリクス（総称型）と条件付き型（Conditional Types）を使って美しく解決する極意を解説します。ここをクリアすれば、TypeScriptの型システムの本質がグッと見えてきますよ！
—
1. 最初に直面する「型エラーの壁」
まずは、よくある「残念なコード」から見てみましょう。
何気なく次のような関数を作ったとします。
// ❌ やりがちなダメな例
function fetchConfig(mode: ‘json’ | ‘text’, callback: (result: object | string) => void) {
if (mode === ‘json’) {
callback({ host: ‘localhost’, port: 8080 }); // JSONモードならオブジェクト
} else {
callback(‘Server is running’); // TEXTモードなら文字列
}
}
このコード自体は一見動くように見えますが、呼び出す側で大きな問題が発生します。
fetchConfig(‘text’, (result) => {
// result の型は object | string になってしまう！
// 文字列であることが分かっているのに、toUpperCase() が使えない…！
console.log(result.toUpperCase()); // 💥 怒られる：Property ‘toUpperCase’ does not exist on type ‘object | string’.
});
「モードが `text` なんだから、コールバックの引数は `string` に決まっているでしょ！」とTypeScriptに教えたくても、このままでは伝わりません。これが、引数同士の依存関係が表現できていない状態です。
—
2. ジェネリクスと条件付き型で「依存関係」を構築する
では、プロのアーキテクトがどう書くかをお見せしましょう。
ここでの鍵は、「型引数（Generic）を使って、入力されたモードの型を記憶し、それに応じて戻り値やコールバックの型を動的に変化させること」です。
以下のコードをじっくり見てみてください。
// 匠のジェネリクス設計
type ConfigResult
? { host: string; port: number }
: string;
function fetchConfig
mode: T,
callback: (result: ConfigResult
): void {
if (mode === ‘json’) {
// コンパイラが T = ‘json’ と推論するため、厳密なオブジェクトが要求される
callback({ host: ‘127.0.0.1’, port: 3000 } as ConfigResult
} else {
// コンパイラが T = ‘text’ と推論するため、文字列が要求される
callback(‘System OK’ as ConfigResult
}
}
このコードの頭の中（型評価のイメージ）
TypeScriptのコンパイラは、私たちが関数を呼び出した瞬間、次のような脳内変換（型推論）を行っています。
1. `mode` 引数に `’text’` が渡された
- $\rightarrow$ 型引数 `T` は `’text’` として確定します。
2. 条件付き型 `ConfigResult<'text'>` が評価される
- $\rightarrow$ `T extends ‘json’` は偽（false）になるため、結果は `string` になります。
3. コールバックの引数型が `string` に決定する
—
3. 呼び出し側の世界が変わる瞬間！
このジェネリクスを適用した関数を、実際に呼び出してみましょう。
// 1. JSONモードでの呼び出し
fetchConfig(‘json’, (result) => {
// TypeScriptは賢く、result が { host: string; port: number } であると知っている！
console.log(result.host); // 🟢 完璧に補完され、エラーも起きない
});
// 2. TEXTモードでの呼び出し
fetchConfig(‘text’, (result) => {
// TypeScriptは、result が string であることを完璧に理解している！
console.log(result.toUpperCase()); // 🟢 string のメソッドが堂々と使える！
});
どうですか？ 呼び出し側のコードが驚くほどスッキリし、かつ完全に型安全になりましたよね。「ここをクリアすれば、TypeScriptの基本はバッチリマスターできますよ！」と言った意味が、少し伝わったのではないでしょうか。
—
4. 陥りがちな文法エラーと注意点
最後に、この高度な型定義を実装する際につまづきやすいポイントをいくつか共有しておきますね。
① 型引数の制約（Constraint）を忘れない
`T extends ‘json’ | ‘text’` のように、`T` が取り得る値をあらかじめ限定（制約）しておかないと、予期せぬ値が渡されたときに条件付き型が暴走します。必ずドメインの境界を `extends` で絞り込みましょう。
② アサーション（`as`）が必要になるケース
TypeScriptのコンパイラは非常に優秀ですが、複雑な制御フロー（今回の `if (mode === ‘json’)` の中など）において、動的な型引数 `T` と実際の値の完全な一致を静的解析しきれないことがあります。その場合は、安全な範囲で `as ConfigResult
—
まとめ
今回は、関数シグネチャにおける「引数の依存関係」をジェネリクスと条件付き型で解決する手法を解説しました。
- ただの union 型（`’json’ | ‘text’`）では、引数同士の連動は表現できない。
- ジェネリクス（`T`）で入力を受け止め、条件付き型（`T extends … ? A : B`）で出力を動的に決定する。
- このパターンをマスターすると、APIクライアントやカスタムフックの型定義が劇的に洗練される。
このテクニックは、実務で複雑なライブラリの型設計をする際にも間違いなく武器になります。ぜひご自身のコードでも試してみてくださいね。それでは、次回の知見でお会いしましょう！