こんにちは！TypeScriptの型システムを旅する開発者の皆さん、順調ですか？
今回は、TypeScriptの裏側でこっそり、そしてものすごくスマートに働いてくれている「文脈的型付け（Contextual Typing）」というメカニズムを解剖していきましょう。
他のプログラミング言語からやってきた開発者の中には、「あれ、なんでこの無名関数の引数、型を書いてないのに推論できるんだ？」と不思議に思った方もいるかもしれません。実はこれ、TypeScriptが私たちのコードを読むときの「文脈（コンテキスト）」を深く理解してくれているからなんです。
ここをクリアすれば、TypeScriptのコードがどうやってあなたの意図を読み取っているのかが手に取るように分かり、型パズルで迷子になることがグッと減りますよ。さあ、一緒にその仕組みを紐解いていきましょう！
—
1. 文脈的型付けってなに？基本のキホン
通常、TypeScriptで変数や引数を定義するときは、次のように型を明示しますよね。
// 型を明示する一般的な書き方
const add: (a: number, b: number) => number = (a: number, b: number) => {
return a + b;
};
でも、毎日こんなふうに型をびっしり書いていたら、キーボードの消耗が激しくてたまりません。TypeScriptには「型推論（Type Inference）」があるおかげで、多くの場合は型を省略できます。
ここで重要なのが、型推論には「2つの方向」があるということです。
1. 下から上への推論 (Bottom-up / 従来型の推論):
初期値から「この変数は数字だな」と決定するパターン。
const x = 42; // x は number 型と推論される
2. 上から下への推論 = 文脈的型付け (Top-down / Contextual Typing):
「この場所にはこういう関数が入るはずだ」という周囲の文脈から、内側の要素の型を逆算するパターン。
百聞は一見にしかず。コードで見てみましょう。
type StringChecker = (value: string) => boolean;
// 変数 checker には 「StringChecker型」 という【文脈】がある
const checker: StringChecker = (val) => {
// val に型を書いていないのに、TypeScriptは「あ、ここは string だな」と知っている！
return val.length > 0;
};
このコードで、`val` に型注釈（`: string`）を書かなくてもエラーにならないのは、TypeScriptが左側の `StringChecker` という文脈を読み取り、「ここに代入される関数なら、引数は `string` 型に違いない」と右側の関数に型をプレゼントしてくれているからなんです。これが文脈的型付けの正体です。
—
2. コールバック関数で大活躍するメカニズム
私たちが日常のフロントエンド開発（ReactやArrayのメソッドなど）で一番お世話になっているのは、この文脈的型付けがコールバック関数の中で働く瞬間です。
例えば、JavaScriptでおなじみの `Array.prototype.map` を考えてみましょう。
const numbers = [1, 2, 3, 4, 5];
// 引数 num に型を書いていないのに、自動的に number 型になる
const doubled = numbers.map((num) => {
return num 2;
});
内部で何が起きているか、脳内トレースしてみましょう。
1. `numbers` は `number[]`（数値の配列）として定義されています。
2. `.map()` メソッドの定義を覗きに行くと、「受け取るコールバック関数の第一引数は、配列の要素の型と同じになる」というルール（ジェネリクス）があります。
3. つまり、TypeScriptは「あ、この `map` に渡される関数の引数は `number` だな」という強い文脈を生成します。
4. その結果、開発者は `num: number` と書かなくても、安全に `num 2` のような演算ができるというわけです。
もしここで、文脈的型付けが効いていなかったら、毎回 `numbers.map((num: number) => …)` と書かされて大忙しになっていたはずです。TypeScriptの優しさに感謝ですね！
—
3. 陥りやすい罠：「あれ、型が `any` になった？」
文脈的型付けは非常に強力ですが、そのメカニズムゆえに「文脈が失われると、急に推論できなくなる」という落とし穴があります。
初学者が本当によくハマるポイントを見てみましょう。
罠のパターン：関数をいったん別の変数に切り出す
const numbers = [1, 2, 3, 4, 5];
// ❌ やりがちなミス：コールバックを外に切り出してみる
const doubleFunc = (num) => {
// ここでエラーまたは num が implicit any（暗黙のany）になる！
return num 2;
};
const doubled = numbers.map(doubleFunc);
なぜエラーになるの？
`doubleFunc` を単体で定義した瞬間、TypeScriptは「この関数がどこで使われるか」の文脈を持っていません。そのため、「引数 `num` の型が分からないから、とりあえず `any` にしちゃう（あるいはエラーにする）」という挙動になります。
正しいアプローチ
もし関数を外側に切り出したいのであれば、ちゃんと文脈（型）を与えてあげれば解決します。
// パターンA: 引数にちゃんと型を書く
const doubleFunc = (num: number): number => {
return num 2;
};
// パターンB: 関数全体の型を定義する
const doubleFunc: (num: number) => number = (num) => {
return num 2;
};
const doubled = numbers.map(doubleFunc); // これなら完璧！
文脈的型付けは、「どこで使われるか（コンテキスト）」に依存しているため、コンテキストが断絶すると途端に魔法が解けてしまう――ここを覚えておくだけで、型エラーに怯える時間が激減します。
—
4. チーフアーキテクトが教える、一歩進んだ極意
最後に、もう少し実践的な例を見てみましょう。イベントハンドラーやオブジェクトのプロパティに渡す関数でも、この文脈的型付けはフル稼働しています。
type EventHandlers = {
onClick: (event: MouseEvent) => void;
onHover: (event: MouseEvent) => void;
};
// オブジェクトリテラルを渡すときも文脈的型付けが効く
const handlers: EventHandlers = {
// event の型を明示しなくても、MouseEvent として推論される！
onClick: (event) => {
console.log(event.clientX);
},
onHover: (event) => {
console.log(event.clientY);
}
};
このように、TypeScriptは私たちが書くコードの構造（構造的型付けと文脈的型付けのコンボ）を頼りに、コードの安全性と書きやすさのベストバランスを裏側で計算し続けています。
—
まとめ
いかがだったでしょうか？
- 文脈的型付け（Contextual Typing）とは、周囲の型情報（変数宣言の型、関数の引数型、オブジェクトの型など）から、内側の要素の型を「上から下へ」逆算する仕組み。
- コールバック関数などで型注釈を省略できるのは、このメカニズムのおかげ。
- ただし、関数を安易に切り離すなどして「文脈」が失われると、型推論が効かなくなる（`any` になる）ので注意が必要。
ここをクリアできれば、もうTypeScriptの型推論にビクビクする必要はありません。「今、このコードの周りにはどんな文脈があるかな？」と視点を少し高く持つだけで、TypeScriptが何を考えているのかが手に取るように分かるようになりますよ。
日々のコーディングが、より楽しく、より強固なものになりますように。
それでは、次のアーキテクチャの旅でお会いしましょう！