やあ。TypeScriptの世界へようこそ。
日々コードを書いていると、「メソッドチェーン（Fluent Interface）」を作りたい場面によく出くわすよね。`obj.setName(“A”).setAge(20).build()` のように流れるようにメソッドを繋げるやつだ。
でも、継承を使った時に「あれ？親クラスのメソッドを呼んだ後に子クラスのメソッドが呼べないぞ？」と悩んだことはないかな？今日は、その壁を突破するために不可欠な「`this` 型の明示的な制約」という、TypeScriptの深淵に触れるテクニックを伝授するよ。
—
なぜメソッドチェーンで「this」が迷子になるのか
まず、基本的なメソッドチェーンの書き方を見てみよう。
class UserBuilder {
name: string = “”;
age: number = 0;
setName(name: string) {
this.name = name;
return this; // 自分自身を返す！
}
setAge(age: number) {
this.age = age;
return this;
}
}
const user = new UserBuilder().setName(“Alice”).setAge(25);
これは上手くいく。`setName` が `UserBuilder` を返してくれるから、次のメソッドが繋がるわけだね。でも、ここに継承が絡むと話が変わる。
継承した瞬間に「型」がすり替わる罠
もし `UserBuilder` を拡張して `AdminBuilder` を作ったらどうなるだろう？
class AdminBuilder extends UserBuilder {
role: string = “user”;
setRole(role: string) {
this.role = role;
return this;
}
}
// ここで問題発生！
const admin = new AdminBuilder()
.setName(“Bob”) // UserBuilderを返す
.setRole(“admin”); // エラー！
なぜエラーになるか分かるかな？
`setName` メソッドの実装は親クラスの `UserBuilder` にあるよね。ということは、`setName` が返す `this` の型は、コンパイラから見ると `UserBuilder` として推論されてしまうんだ。
`UserBuilder` には `setRole` メソッドなんて存在しないから、コンパイラは「そんなメソッド知らないよ！」と怒るわけだね。
—
解決策：`this` に型を教え込む（ポリモーフィック this）
TypeScriptには、メソッドの第一引数の位置に `this` を書くことで、「このメソッドが呼び出された時のインスタンスの型をそのまま保持せよ」と指示する特別な構文があるんだ。
書き方はこうだ。
class UserBuilder {
// …略…
// 第一引数に this: this を書くのがポイント！
setName(this: this, name: string): this {
this.name = name;
return this;
}
}
この「this: this」は何をしているのか？
これは「ポリモーフィック `this` 型」と呼ばれる機能だ。
- `this: this`（引数）: 「このメソッドは、呼び出し元がこのクラス（またはそのサブクラス）である場合にのみ呼び出せる」と制約をかける。
- `: this`（戻り値）: 「戻り値の型を、静的なクラス名ではなく、実行時のインスタンスの型（`this`）にする」と明示する。
これを使うと、`AdminBuilder` で `setName` を呼んだとき、TypeScriptは「あ、これは `AdminBuilder` として返せばいいんだな」と正しく理解してくれるようになるんだ。
—
実践コード：継承しても型が壊れないビルダークラス
このテクニックを適用すると、継承関係でも完璧に型推論が効くようになるよ。
class BaseBuilder {
// メソッドチェーンを維持しつつ、継承先でも正しい型を返す
build(this: this): this {
return this;
}
}
class UserBuilder extends BaseBuilder {
name: string = “”;
setName(this: this, name: string): this {
this.name = name;
return this;
}
}
class AdminBuilder extends UserBuilder {
role: string = “admin”;
setRole(this: this, role: string): this {
this.role = role;
return this;
}
}
// 完璧なメソッドチェーン！
const admin = new AdminBuilder()
.setName(“Alice”) // AdminBuilderを返す
.setRole(“admin”) // AdminBuilderを返す
.build(); // 問題なく型が繋がる
—
まとめ：TypeScriptを掌握するために
今日のポイントを整理しよう。
1. メソッドチェーンの戻り値は `this` にする: 自分自身を返すことでチェーンを繋ぐ。
2. 継承時の型崩れは `this` 型で防ぐ: `this: this` を明示することで、コンパイラに「戻り値はあくまで実行時のインスタンス型だよ」と教え込む。
3. 型は「推論」させるものだが、時には「誘導」するもの: TypeScriptの型システムは強力だけど、継承のように複雑な階層構造では、今回のように人間がヒントを与えてあげることが、堅牢なコードへの近道になるんだ。
どうかな？ これさえ押さえておけば、どんなに複雑なクラス階層を作っても、メソッドチェーンの型で迷うことはなくなるはずだよ。
型定義は、単なる記述じゃなくて、コンパイラとの対話なんだ。この感覚を掴めれば、君はもうTypeScriptの基礎を完全にマスターしたと言っても過言じゃない。また何か疑問があったら、いつでも聞いてね。応援しているよ！