TypeScriptを書いていると、基本の型（`string`や`number`、あるいは`unknown`や`any`）をひと通りマスターしたあたりで、必ずと言っていいほど「型システムを自在にハックしたい欲」に駆られる瞬間がやってくる。
特に、既存のライブラリや、ちょっとトリッキーな関数設計をリファクタリングしているとき、「あれ、この関数の内部で使われている `this` の型だけをキレイに引っこ抜いて、別の場所で再利用したいな……」と悩んだことはないだろうか？
今回は、そんな中級から一歩先の上級者へステップアップしようとしている君に向けて、TypeScriptが標準で用意している隠し味的なユーティリティ型、`ThisParameterType
現場で「おっ、こいつ分かってるな」と思われるような実践的なユースケースを交えて、その泥臭い実態まで丸裸にしていく。
—
そもそも `this` の型定義ってどうなってるんだっけ？
JavaScriptの `this` は、ランタイムの文脈（呼び出し方）によってコロコロ変わる、いわゆる「フロントエンド開発者の頭痛の種」だ。しかし、TypeScriptの世界では、関数の第一引数（のさらに前）に「仮の引数」として `this` を明示することで、コンパイル時にその型を静的に縛ることができる。
まずは、おさらいとして次のようなコードを見てほしい。
// カウンタークラスのデータ構造をイメージしたオブジェクト
interface CounterContext {
count: number;
}
// this の型を明示的に指定した関数
function increment(this: CounterContext, value: number): void {
this.count += value;
}
この `increment` 関数は、通常の引数として `value: number` を取るが、その手前に `this: CounterContext` という見慣れない構文がある。これは実際の実行時には引数として渡されない、TypeScriptの型チェッカー専用の擬似的なパラメータだ。
この「関数型から、この `this` の部分だけを綺麗にひっぺがして抽出したい」ときに使うのが、今回主役の `ThisParameterType
—
`ThisParameterType` の基本とブラウザの裏側の話
TypeScriptの内部実装（`lib.es5.d.ts`）を覗いたことがあるなら知っているかもしれないが、`ThisParameterType
type ThisParameterType
ここでやっていることは、TypeScriptのコンパイラが裏側で行っている型推論（`infer`）の応用技だ。
もしジェネリック型 `T` が「`this` を持つ関数型」にマッチするなら、その `this` に割り当てられている型 `U` を返し、マッチしなければ `unknown` を返す。これだけだ。
ここでブラウザの実行環境（JavaScriptエンジン）の話を少し挟んでおこう。
ブラウザは、実行時に `this` が何であるかを評価するために、関数がどう呼び出されたか（ドット記法の左側にあるか、`call`/`apply`/`bind` が使われたか）を追跡する。しかし、TypeScriptの型システムはブラウザがコードを実行する前の静的な世界でこのパズルを解いている。
`ThisParameterType
—
実務でどう使う？ コピペで試せる実践コード
理屈はこれくらいにして、実際の現場でどう役立つのかを見ていこう。
例えば、サードパーティ製のライブラリから渡ってきた関数や、レガシーなコールバック関数の `this` 型を安全にラップして、独自のカスタムフックやヘルパー関数を作りたい場面を想定してほしい。
以下のコードをそのままエディタ（VSCodeなど）に貼り付けて試してみてほしい。
// 1. 準備：特定の this コンテキストを要求する関数
interface UserSession {
userId: string;
role: ‘admin’ | ‘user’;
}
function validatePermission(this: UserSession, requiredRole: ‘admin’ | ‘user’): boolean {
// this のプロパティに安全にアクセスできる
return this.role === requiredRole || this.role === ‘admin’;
}
// 2. ThisParameterType を使って、this の型を抽出し、別の型として定義する
type SessionType = ThisParameterType
// 結果: SessionType は UserSession 型になる！
// 3. 応用：抽出した this 型を使って、バインド済みの安全な関数ラッパーを作る工場関数を作る
function bindContext
fn: T,
context: ThisParameterType
): (…args: Parameters
// JavaScriptの標準機能である .bind() を使って、this を強制的に固定する
return fn.bind(context);
}
// — 実際に動かしてみる —
const currentSession: UserSession = {
userId: ‘user_12345’,
role: ‘user’,
};
// validatePermission は本来 this が必要だが、bindContext を使うことで安全にラップできる
const boundValidate = bindContext(validatePermission, currentSession);
// 呼び出し時に this を意識する必要がなくなり、通常の引数だけで実行可能になる
const hasAccess = boundValidate(‘admin’);
console.log(hasAccess); // false
このコードの何が素晴らしいかと言うと、元の関数 `validatePermission` の `this: UserSession` という定義を変更した場合に、抽出している `SessionType` も、それをラップする関数の型も、すべて自動的に追従して型エラーを出してくれる点だ。
手動で型を二重管理する絶望から、君を解放してくれる強力な武器になる。
—
シニアからのアドバイス：OmitThisParameterとの合わせ技
`ThisParameterType
先ほどのコードで、`bindContext` は `this` をあらかじめ束縛（bind）して、呼び出し側から `this` を隠蔽した関数を返した。この「関数型から `this` の定義を取り除いた、純粋な引数と返り値だけの関数型」を作ってくれるのが `OmitThisParameter
先ほどの `bindContext` の戻り値の型は、実は以下のようにすっきりと書き換えることができる。
// OmitThisParameter を使うと、thisパラメータが削ぎ落とされた関数型が一撃で手に入る
function betterBindContext
fn: T,
context: ThisParameterType
): OmitThisParameter
return fn.bind(context) as OmitThisParameter
}
ライブラリの型定義や、複雑なイベントハンドラーの設計などで、オブジェクト指向的な `this` の世界と、関数型プログラミング的な「データを引数で渡す」世界を橋渡しするアクロバティックなコードを書くとき、この2つのユーティリティ型はなくてはならない存在になる。
—
まとめ
- `ThisParameterType
` とは？
関数型 `T` から `this` の型だけを抽出するための標準ユーティリティ型。
- どんな仕組み？
Conditional Types と `infer` を使い、コンパイル時に `this: U` の部分をパターンマッチで逆算している。
- 実務での使い所
レガシーな `this` 依存の関数を安全にラップしたり、他の型定義と連動させたいときの型パズルに最適。
最初は「こんなマニアックな型、いつ使うんだよ」と思うかもしれない。しかし、フロントエンドのコードベースが巨大化し、型安全性を極限まで高めなければならないフェーズに来たとき、こうした標準ユーティリティ型の引き出しの多さが、アーキテクトとしての君を助けてくれるはずだ。
ぜひ、今日の業務のコードリーディングやリファクタリングで、こっそり試してみてほしい。
コメント