【入門編】 型レベルの四則演算 – TypeScript実践ガイド

こんにちは！TypeScriptの世界へようこそ。日々のフロントエンド開発、本当にお疲れ様です。

「TypeScriptを学び始めたけれど、型（Type）ってなんだか難しそう…」
「エラーを消すためだけの、ちょっと面倒な存在になっていないかな？」

そんな風に思っている方も、どうか安心してくださいね。TypeScriptは、実はただの「静的なチェックツール」ではありません。私たちが普段書いているJavaScriptと同じくらい、あるいはそれ以上に表情豊かで、パズルみたいに面白い知的なおもちゃなんです。

今回は、TypeScriptの「型」の可能性を極限まで広げる、ちょっと不思議でワクワクするテーマをお届けします。それが「型レベルの四則演算（足し算・引き算）」です。

「えっ、型の上で計算をするの？ `1 + 1` はプログラムを実行したときに計算するんじゃないの？」

そう思ったあなた、大正解です！普通はそうです。しかし、TypeScriptの型システムはあまりにも強力なため、「コードを実行する前（コンパイルする段階）」に、型だけで足し算や引き算を終わらせることができるのです。

難しそうな専門用語はできるだけ使わず、おもちゃのブロックやお買い物のような、身近なイメージで一歩ずつ丁寧に解説していきます。お気に入りの飲み物でも片手に、リラックスして読んでみてくださいね。

—

1. 舞台装置：数字を「ブロックの長さ」で表してみよう

TypeScriptの型システムには、残念ながら直接 `type Add<3, 2> = 3 + 2;` のように書く機能はありません。
そこで、私たちは知恵を使います。

想像してみてください。手元におもちゃのブロックがあります。
「3」という数字を、そのまま数字として扱うのではなく、「ブロックが3個つながったおもちゃ」として表現するのです。

「3」という型は、ブロック3個分： [ 🟥, 🟥, 🟥 ]
「2」という型は、ブロック2個分： [ 🟥, 🟥 ]

TypeScriptでこの「ブロックを並べたもの」を表現するのにぴったりなのが、「タプル型（Tuple）」です。

タプル型ってなぁに？

タプル型とは、「中身の個数や順番がキチッと決まった配列」のことです。

// これはただの「文字列の配列」型（何個入るか決まっていない）
type NormalArray = string[];

// これは「1番目が文字列、2番目が数値」と決まった「タプル」型（長さは絶対に2個！）
type MyTuple = [string, number];

このタプル型には、「長さを数字として教えてくれる」という、とてもお利口な性質があります。

type MyList = [‘🍎’, ‘🍏’, ‘🍎’];
type LengthOfList = MyList[‘length’]; // 💡なんと、型レベルで「3」という具体的な数字が手に入ります！

これが今回のすべての基礎になります。
「数字を直接計算できないなら、その数字の数だけ要素が入ったタプルを作って、最後にその長さを測ればいいじゃない！」というアイデアです。

—

2. 準備：数字からブロックを作る「魔法の工場」

まずは、指定した数字（例えば `3`）を渡すと、その個数分の要素が入ったタプル（`[any, any, any]`）を自動で組み立ててくれる「魔法の工場」を作りましょう。

ここで登場するのが、自分自身を何度も呼び出す「再帰（さいき）型」という仕組みです。ロシアのマトリョーシカ人形のように、条件を満たすまで自分自身をパカッと開き続けるようなイメージです。

ゆっくりコードを見てみましょう。大丈夫、一行ずつ分解しますよ。

// 🛠️ 【魔法の工場】指定された数（N）の長さを持つタプルを作る型
type MakeArray =
// もし、今作っている途中のタプル（Accumulator）の長さが、目標の数（N）と同じになったら…
Accumulator[‘length’] extends N
? Accumulator // できた！完成したタプルを返します
: MakeArray; // まだ足りない！タプルにブロック（any）を1個追加して、もう一度工場を回します

🔍 工場の動きをスローモーションで見てみよう

もし `MakeArray<3>` を呼び出したら、裏側ではこんなことが起きています。

1. スタート：目標 `N` は `3`。最初は空っぽの箱 `Accumulator = []` です。
2. 1回目：今の箱の長さは `0`。「3と同じ？」→「違うよ」。じゃあ箱に `any` を1個追加して、`[any]` にします。
3. 2回目：今の箱の長さは `1`。「3と同じ？」→「違うよ」。もう1個追加して、`[any, any]` にします。
4. 3回目：今の箱の長さは `2`。「3と同じ？」→「違うよ」。もう1個追加して、`[any, any, any]` にします。
5. 4回目：今の箱の長さは `3`。「3と同じ？」→「YES！同じだよ！」。
6. ゴール：完成した `[any, any, any]` をお披露目します！

これで、数字を「ブロックの長さ」に変換する準備が整いました！

—

3. 足し算（加算）の型：ブロックをガッチャンコ！

さあ、いよいよ楽しい足し算の時間です。
「3 + 2」をやりたい場合、イメージはこうです。

1. 3個のブロックが入った箱（タプル）を作る：`[any, any, any]`
2. 2個のブロックが入った箱（タプル）を作る：`[any, any]`
3. 2つの箱の中身を、1つの大きな箱にまとめる（合体！）：`[any, any, any, any, any]`
4. 最後に、その大きな箱の長さを測る。

これをTypeScriptのコードにすると、驚くほどスッキリ書けます。

// ➕ 【足し算の型】 A と B を足します
type Add = [
…MakeArray, // A個のブロックを展開して入れる
…MakeArray // B個のブロックも展開して入れる
][‘length’]; // 合体したタプルの長さを測る！