こんにちは！フロントエンドからバックエンドまで、TypeScriptの荒波を日々乗りこなしているシニアアーキテクトの私です。
今回は、TypeScriptの型システムにおける「知っていると一目置かれる、けれど初心者が一番最初にハマりやすい罠」についてお話しします。テーマは「コールバック関数の戻り値が `void` のときの不思議な挙動」です。
「えっ、`void` を返す関数に、適当な値を返す関数を渡してもエラーにならないの？」
そんな疑問を持ったことはありませんか？実はこれ、TypeScriptの設計思想（型安全性と実用性のバランス）に基づいた仕様なんです。
ここをしっかりクリアできれば、あなたのTypeScript理解度は一段と深まりますよ。さっそく、その深層の世界を覗いてみましょう！
—
1. 基本のおさらい：コールバック関数と `void`
まずは、よくあるコードから見ていきましょう。
例えば、何かを「実行する」処理があって、その完了時にコールバック関数を受け取る次のような関数があるとします。
// コールバック関数を受け取って実行する関数
function processTask(callback: () => void): void {
console.log(“タスク開始…”);
callback(); // コールバックを実行
console.log(“タスク完了！”);
}
ここで `() => void` という型は、「引数を受け取らず、何も値（`undefined`など）を返さない関数」を意味していますよね。
では、この `processTask` に対して、次のように「文字列を返す関数」を渡したらどうなるでしょうか？
// 文字列を返す関数
function getMessage(): string {
console.log(“メッセージを生成中…”);
return “Hello, TypeScript!”;
}
// さあ、これを渡してみます
processTask(getMessage);
他の厳密なプログラミング言語（JavaやC#など）から来た方なら、ここで「型が一致しません！エラー！」とコンパイラが怒るのを想像するはずです。
しかし、TypeScriptでは……なんと、エラーになりません。普通にコンパイルを通り、実行できてしまいます。
[出力結果]
タスク開始…
メッセージを生成中…
タスク完了！
「あれっ？ `void` を期待しているのに、`string` を返す関数を渡していいの？ バグにならない？」と不安になりますよね。なぜこんな仕様になっているのか、その理由を解き明かしていきましょう。
—
2. なぜエラーにならない？ TypeScriptの優しい（けれど危険な）仕様
TypeScriptがこのような挙動をする理由は、一言で言うと「JavaScriptの実用性を優先したから」です。
JavaScriptの世界では、既存のライブラリや関数（例えば、配列の `Array.prototype.forEach` など）で非常によくあるパターンがあります。
`forEach` は、各要素に対してコールバック関数を実行します。このコールバックの戻り値は通常 `void`（つまり「何も返さない」）として設計されています。
const numbers = [1, 2, 3];
// 一般的な使い方（何も返さない）
numbers.forEach((num) => {
console.log(num);
});
しかし、JavaScriptの開発では、ここにうっかり `console.log()` の結果や、何らかの式の結果（値を返す関数）をそのまま差し込んでしまうことがよくあります。
// Array.prototype.map ではなく、うっかり forEach の中で値を返す関数を入れてしまった例
numbers.forEach((num) => {
return num 2; // 本当は値を返したいわけではないが、式の結果が返ってしまうことがある
});
もしTypeScriptが「`void` を期待する場所に、値を返す関数を渡したら即エラー」にしてしまうと、世の中の便利なJavaScript製ライブラリの多くに型を付けるのが非常に窮屈になってしまいます。
そのためTypeScriptでは、「『何も返さないでほしい（`void`）』という場所には、何を返しても、その戻り値は捨てられる（無視される）から安全だよね」という特別ルール（許容性）を採用しているのです。
—
3. この仕様が引き起こす「現場での落とし穴」
この仕様は柔軟で便利な反面、実務では思わぬバグを生むことがあります。
次のコードを見てください。あなたはカスタムのイベントリスナーやフック関数を作っています。
// 外部からのイベントハンドラーを登録する関数
function registerListener(handler: () => void) {
// 内部でハンドラーを呼び出し、もし戻り値があれば何か処理をしたい（つもりが…）
const result = handler();
if (result !== undefined) {
console.log(“ハンドラーから値が返されました:”, result);
}
}
ここで、開発者A君が次のような関数を渡しました。
// A君の書いたコード
function myHandler(): string {
// 本来はエラーになってほしいが、ならない！
return “重要なデータ”;
}
registerListener(myHandler);
`registerListener` の作者は「誰も何も返さない」という前提で書いていたのに、A君がうっかり値を返す関数を渡してしまい、さらに TypeScript はそれをノーエラーで通してしまったため、意図しない挙動やロジックのすれ違いが起きてしまいます。
「引数のコールバックが確実に『何も返さないこと』を強制したい！」
そんなとき、どうすればよいのでしょうか？
—
4. 解決策：厳密に `void` を強制するテクニック
TypeScriptのデフォルトの挙動では緩すぎる場合、より厳格に型を縛るテクニックがあります。それが「関数型のオーバーロード」や「条件分岐型」の応用ですが、まずは最もシンプルかつ実用的なアプローチを見てみましょう。
実は、TypeScriptのコンパイラオプションに `–noUncheckedIndexedAccess` や類似の厳格な設定がありますが、コールバックの戻り値を厳密に `void` にするには、ジェネリクスや型制約を工夫します。
しかし、もっと手っ取り早く、かつ確実に「何も返させない」ようにする実践的なイディオムがあります。それが、アロー関数でラップして受け取る側で強制する、あるいは型定義で戻り値の型を厳しく固定する方法です。
例えば、コールバックの型を以下のように定義すると、実は完全に防ぐことはできません（TypeScriptの仕様上、`() => void` 型の変数には値を返す関数を代入できるサブタイピング規則があるためです）。
> 💡 コアな知見：サブタイピングの魔法
> TypeScriptにおいて、`() => void` という型は、「戻り値として何を返しても、それを無視して扱うことができる関数型」を意味します。つまり、`() => string` は `() => void` の部分型（サブタイプ）とみなされます。だからこそ代入できてしまうのです。
では、「絶対に値を返させたくない（戻り値をコード内で利用したい、あるいはミスをコンパイルエラーにしたい）」場合はどうすればよいでしょうか？
実践テクニック：戻り値を `undefined` に固定する？
実は `void` の代わりに `undefined` を使うと、挙動が変わることがあります。
// 戻り値を明示的に `undefined` にする
function processStrictTask(callback: () => undefined): void {
callback();
}
function getMessage(): string {
return “Hello”;
}
// これはエラーになる！
// Type ‘string’ is not assignable to type ‘undefined’.
processStrictTask(getMessage);
おっ、これなら `string` を返す関数を弾くことができますね！
- `void` を使った場合：何を返してもOK（戻り値は無視される）
- `undefined` を使った場合：厳密に `undefined` しか返してはダメ（値を返すとエラーになる）
「コールバックの中で、うっかり値を返してほしくない（例：非同期処理のミドルウェアや、特定のライフサイクルーフックなど）」という設計をしたい場合は、あえて `void` ではなく `undefined` を戻り値の型に指定するというのが、プロ級のテクニックとして非常に有効です。
—
まとめ
いかがでしたでしょうか？ 今回のポイントをギュッと凝縮して振り返ってみましょう。
1. `() => void` を期待する場所に値を返す関数を渡しても、TypeScriptはエラーを出さない（仕様）。
2. これはJavaScriptの柔軟性（配列の `forEach` など）に合わせて設計された、TypeScriptの「優しさ」によるもの。
3. しかし、意図せぬ値の返却によるバグを防ぎたい、厳密にコントロールしたいという場面では、あえて戻り値を `undefined` に指定することで、コンパイラに厳しくチェックさせることができる。
ここをクリアできれば、単に「エラーが出ないようにコードを書くTypeScript初心者」から、「言語の仕様を理解し、意図通りに型をコントロールできる中級者・アーキテクト」へとステップアップできますよ！
日々の開発で「おっ」と思う挙動に出会ったら、ぜひ今回の話を思い出してみてください。それでは、快適なTypeScriptライフを！