【入門編】引数に渡す「関数」の戻り値型を、別の引数の型として利用する「依存型」の応用 – TypeScript コア・型システムの基礎解析バイブル

こんにちは！TypeScriptの型システムの世界へようこそ。
フロントエンドからバックエンドまで、コードの海をスイスイ泳げるようになるために、今日はとてもエキサイティングなテーマを用意しました。

他の言語からTypeScriptに入ってきた方や、基本構文を覚えたばかりの段階だと、「ある関数の実行結果（戻り値）を、次の関数の引数として安全にリレーしていくパイプライン処理」の型付けで手が止まってしまうことってよくありますよね。

「あっちの引数はこっちの戻り値に依存しているのに、どう型を繋げばいいんだろう……？」

安心してください。ここをクリアすれば、あなたのTypeScriptのスキルは一段上のステージに到達します。今日は、関数同士がバトンを綺麗にパスし合える「依存型」のジェネリクス設計について、優しく、そして本質的なところまで紐解いていきましょう！

—

1. なぜ「依存型（関数の連鎖）」の理解が必要なのか？

まずは、私たちがよくやりがちな「ちょっと残念なコード」から見てみましょう。
例えば、文字列を加工して、最終的に数値を返すようなパイプラインを考えます。

// よくある（でも型安全が少し不安な）例
function pipe(value: any, fn1: (arg: any) => any, fn2: (arg: any) => any) {
return fn2(fn1(value));
}

このコード、`any` だらけで何でも通ってしまうので、TypeScriptを使っている意味がほとんどありませんよね。`fn1` が何を返すのか、`fn2` が何を受け取るべきなのか、コンパイラはまったくチェックしてくれません。

私たちが目指したいのは、「1番目の関数の戻り値の型」を自動的に検出し、それが「2番目の関数の引数の型」と完璧に一致しているかを、コンパイル時にビシッと保証する世界です。

これを実現するのが、TypeScriptのジェネリクス（総称型）を巧みに使った依存型の応用テクニックになります。

—

2. 基本的なアプローチ：2つの関数を繋ぐパイプライン

まずはシンプルに、初期値と「2つの関数」を受け取って実行する `pipe2` 関数を作ってみましょう。イメージとしては、陸上競技の「リレー」です。

// T: 初期値の型
// U: 1番目の関数の戻り値（＝2番目の関数の引数）の型
// V: 最終的な戻り値の型
function pipe2(
initialValue: T,
fn1: (arg: T) => U,
fn2: (arg: U) => V
): V {
const intermediate = fn1(initialValue); // ここでU型が確定する
return fn2(intermediate); // ここでV型が確定する
}

コードの心臓部を読み解く

1. `` という3つの型変数（プレースホルダー）を用意しています。
2. `fn1` は `T` を受け取り、`U` を返します。
3. `fn2` は、`fn1` の戻り値である `U` をそのまま引数の型として受け取るように縛っています（ここがポイント！）。
4. 最終的に `fn2` の戻り値である `V` が、このパイプライン全体の戻り値になります。

実際に使ってみましょう。

// 文字列を数値に変換し、さらにそれを2倍するパイプライン
const result = pipe2(
“123”, // T: string
(str) => parseInt(str, 10), // fn1: (arg: string) => number (これが U)
(num) => num 2 // fn2: (arg: number) => number (これが V)
);

// result は自動的に number 型として推論されます！
console.log(result); // 246

もしここで、`fn2` に文字列を期待するような処理を書いてしまうと……？

const errorExample = pipe2(
“123”,
(str) => parseInt(str, 10), // U は number
(num) => num.toUpperCase() // ❌ エラー！number型に toUpperCase は存在しない
);

TypeScriptのコンパイラが「おいおい、前の関数は `number` を返しているのに、次の関数は `string` を期待しているよ！」と、実行する前に赤く波線を引いて教えてくれます。これが型安全の醍醐味ですね！

—

3. 実践編：可変長の関数を繋ぐ型定義（TypeScriptの真骨頂）

「2つ繋げるのはわかったけど、実務では3つでも4つでも関数を繋ぎたいんだよね」という声が聞こえてきそうです。
ここからが少しプロフェッショナルな領域になりますが、TypeScriptの型推論の力を借りて、任意の数の関数を安全に繋ぐ仕組みを作ってみましょう。

TypeScriptでは、タプル型（要素の型と順番が固定された配列）とジェネリクスを組み合わせることで、これがエレガントに実現できます。

// 初期値を受け取り、関数配列を順番に実行していくパイプライン
// 推論を賢く働かせるための少し高度なテクニックです

// 1. 関数の型を表現するヘルパー
type UnaryFunction = (arg: any) => any;

// 2. パイプライン本体
// 最初の引数の型からスタートし、最後の関数の戻り値まで型を連鎖させます
function pipe(value: A): A;
function pipe(value: A, fn1: (arg: A) => B): B;
function pipe(value: A, fn1: (arg: A) => B, fn2: (arg: B) => C): C;
function pipe(
value: A,
fn1: (arg: A) => B,
fn2: (arg: B) => C,
fn3: (arg: C) => D
): D;
// 実装部（オーバーロードのシグネチャをまとめる）
function pipe(value: unknown, …fns: UnaryFunction[]): unknown {
return fns.reduce((acc, fn) => fn(acc), value);
}