【入門編】関数型における「Recursive Types」を用いた引数の階層的な型定義 – TypeScript コア・型システムの基礎解析バイブル

こんにちは、TypeScriptの世界へようこそ。今日は、あなたがTypeScriptを真に「使いこなす」ための大きな一歩となる、「再帰的な型定義（Recursive Types）」についてお話ししましょう。

プログラミングをしていると、フォルダ構造やメニューの階層、コメントの返信ツリーなど、「自分自身と同じ形が、内側に何度も現れるデータ」に必ず出会います。これを関数の引数として受け取る際、どう型を定義すればいいのか迷ったことはありませんか？

「ここさえクリアすれば、TypeScriptの基本はバッチリマスターできますよ」

そんな確信を持って、この奥深くも美しい「再帰」の型システムを、世界最高峰の視点から紐解いていきましょう。

—

1. なぜ「再帰的な型」が必要なのか？

例えば、Webサイトの「ナビゲーションメニュー」を想像してみてください。

ホーム
製品情報
ソフトウェア
OS
アプリ
ハードウェア
お問い合わせ

このように、項目の中にさらに項目がある構造を「ツリー構造」と呼びます。これを処理する関数を作るとき、引数の型をどう定義すべきでしょうか？

// もし再帰を使わなかったら…
type Menu = {
title: string;
children?: {
title: string;
children?: {
title: string;
// どこまで書けばいいの！？
}[]
}[]
};

これでは階層が深くなるたびに型定義を書き足さなければならず、限界がありますよね。そこで登場するのが、自分自身を型定義の中で呼び出す「再帰的な型」です。

—

2. 再帰的な型定義の基本：自分を再利用する

TypeScriptの型定義は、実は非常に柔軟です。型の中で自分自身の名前を使うことができます。

基本のコード例

まずは、最もシンプルな「ツリー構造」を定義してみましょう。

カテゴリ構造を表す再帰的な型

/
type Category = {
name: string;
// childrenプロパティの中で、自分自身（Category）の配列を持っている
children?: Category[];
};

// 使用例
const myData: Category = {
name: “電子機器”,
children: [
{
name: “PC”,
children: [
{ name: “MacBook” },
{ name: “Windows Desktop” }
]
},
{
name: “スマートフォン”
}
]
};

ここで注目してほしいのは、`children?: Category[]` の部分です。
TypeScriptのコンパイラは、この定義を見た瞬間に「ああ、この構造は無限に深く続く可能性があるんだな」と理解します。これが再帰的な型定義の正体です。

—

3. 実践：再帰的な型を引数に取る関数

それでは、この型を使って「すべての項目名をコンソールに表示する関数」を作ってみましょう。再帰的なデータを扱うには、関数自体も「再帰関数」にするのが鉄則です。

階層構造を深掘りして名前を表示する関数
@param category Category型のオブジェクト
@param indent 表示用のインデント（深さを表す）

/
function printCategoryNames(category: Category, indent: string = “”) {
// 1. まず自分の名前を表示
console.log(`${indent}${category.name}`);

// 2. もし子供（children）がいたら、それぞれに対して自分自身を呼び出す
if (category.children) {
category.children.forEach(child => {
// ここで再帰呼び出し！
printCategoryNames(child, indent + ” “);
});
}
}

// 実行
printCategoryNames(myData);

このコードの「型安全」なポイント

1. コンパイル時のチェック: `category.children` に、もし `Category` 型ではない（例えば `number` 型など）が混じっていたら、TypeScriptが即座にエラーを出してくれます。
2. 補完の恩恵: 関数の中で `child.` と打つだけで、再び `name` や `children` が候補に現れます。これは、コンパイラが階層の底まで型を追跡できている証拠です。

—

4. 陥りやすい罠と解決策

初心者の方が最初につまずきやすいポイントを、プロの視点で解説します。

① オプショナル（?）を忘れない

再帰構造には必ず「終わり（末端）」が必要です。もし `children: Category[]` と（`?`なしで）書いてしまうと、「絶対に子供がいなければならない」という定義になり、データが無限に続くことを強制されてしまいます。必ず `?` をつけるか、`children: Category[] | undefined` としましょう。

② 循環参照による無限ループ（実行時の注意）

これは型の問題ではなくロジックの問題ですが、データが自分自身を指している場合（Aの子供がBで、Bの子供がA…）、関数は無限ループに陥ります。
TypeScriptの型は「構造」を守ってくれますが、「値」がループしていないかまでは保証しません。ツリー構造を扱う際は、データが循環していないか注意しましょう。

③ 「型が深すぎる」というエラー

非常に複雑な型計算を再帰で行うと、TypeScriptから「Type instantiation is excessively deep（型のインスタンス化が深すぎます）」と怒られることがあります。しかし、今回のような基本的なデータの階層定義であれば、まず心配ありません。

—

5. まとめ：TypeScriptを掌握するための第一歩

「再帰的な型定義」をマスターすると、あなたの書くコードの柔軟性は飛躍的に向上します。

型は固定された箱ではない: 必要に応じて自分自身を呼び出し、動的な構造を表現できる。
再帰関数との相性が抜群: 型が再帰的であれば、ロジックも自然と再帰的になり、コードがシンプルになる。
コンパイラを信じる: TypeScriptは、あなたが思っている以上に深く、厳密に階層構造を監視してくれます。

これこそが、TypeScriptの持つ「表現力」の真髄です。
最初は少し頭がこんがらがるかもしれませんが、自分でフォルダ構造のようなデータを作って、この関数を動かしてみてください。

「なるほど、型がつながっている！」

そう実感できたとき、あなたはTypeScriptの基本を完全にマスターし、より高度なアーキテクチャへと踏み出す準備ができているはずです。

これからも、型と共に素晴らしいコードを書いていきましょう。応援していますね！