TypeScript Academy · レッスン

型付きFluentインターフェース

Q: 「型付きFluentインターフェース」で何を学びますか？

型で蓄積された状態を追跡しながらメソッドを連鎖させます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

型で蓄積された状態を追跡しながらメソッドを連鎖させます。

「型付きFluentインターフェース」はCoddyKit上の無料TypeScript Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

設定内容の追跡

通常のビルダーでは、必須フィールドが不足していても、いつでもbuild()を呼び出せます。ジェネリック型パラメーターを使って蓄積された状態を型システムで追跡することで、これを改善できます。

状態型パラメーター

これまでに提供されたキーを記録するジェネリック型Sをビルダーに与えます。各メソッドが実行されるたびに、新しいキーを含めるようにSを拡張します。

class Builder<S> {
  // S is a record of keys set so far, e.g. {} or { url: string }
  private data: Record<string, unknown> = {};
}

各メソッドがキーを追加

セッターは、新しく追加されたキーをSに含む新しい型付きビルダーを返します。実行時には値が保存され、それに応じて型も拡張されます。

  set<K extends string, V>(key: K, value: V): Builder<S & Record<K, V>> {
    this.data[key] = value;
    return this as unknown as Builder<S & Record<K, V>>;
  }

交差型のテクニック

式S & Record<K, V>は、以前の状態と新しいキーの交差型を作ります。2回呼び出した後には、型が両方のキーを正確に認識します。

type Empty = {};
type AfterUrl = Empty & Record<"url", string>;
type AfterBoth = AfterUrl & Record<"method", string>;
// AfterBoth = { url: string; method: string }

具体的なフルーエントビルダー

ここでは、リクエストビルダーが蓄積された形状を各呼び出しに引き継ぎます。コンパイラーは、どのフィールドが存在するかを常に正確に把握できます。

class Req<S> {
  private d: Record<string, unknown> = {};
  url(u: string): Req<S & { url: string }> {
    this.d.url = u; return this as any;
  }
  method(m: string): Req<S & { method: string }> {
    this.d.method = m; return this as any;
  }
}

メソッドチェーンに沿って型が成長

チェーン内の各呼び出しによって、より具体的なビルダー型が生成されます。エディターで結果にカーソルを合わせると、蓄積された状態を確認できます。

const partial = new Req<{}>().url("/x");
// type: Req<{ url: string }>
const full = partial.method("POST");
// type: Req<{ url: string; method: string }>

そもそもなぜ状態を追跡するのか

型が設定済みのキーの集合を保持していれば、必須キーが存在する場合にのみbuild()がコンパイルされるよう、後から制約できます。状態パラメーターは、その保証の基盤となります。

蓄積された形状の読み取り

蓄積された形状を取り出して調べることができます。これにより、ビルダーの型が設定内容を正確に反映していることを確認できます。

type StateOf<T> = T extends Req<infer S> ? S : never;
type S1 = StateOf<Req<{ url: string }>>; // { url: string }

実行時の仕組みはシンプル

高度な仕組みはすべて型にあります。実行時には、各セッターがオブジェクトに値を保存するだけです。キャスト（as any）によって、実行時のオブジェクトと、より豊かなコンパイル時の型を橋渡しします。

const r = new Req<{}>().url("/users").method("GET");
console.log("configured url and method");

台帳としてのジェネリックな状態

Sを、設定済みの内容を記録する台帳だと考えてみましょう。メソッドが項目を追加し、ビルドの段階でその台帳を読み取って、構築を許可するかどうかを判断できます。

トレードオフ

型レベルで状態を追跡すると、IDEから正確なフィードバックを得られ、不完全なビルドも防げます。その代わり、いくつかのキャストと、より高度なジェネリックが必要です。多くの人が利用するAPIでは、その価値があります。

簡単な確認

このレッスンの簡単な確認です。

まとめ

型付きフルーエントビルダーは、ジェネリックな状態パラメーターSを保持します。各セッターは新しいキーとの交差型（S & Record<K, V>）をSに適用して、より具体的なビルダーを返します。これにより、コンパイラーは設定済みフィールドを正確な台帳として把握できます。

よくある質問

「型付きFluentインターフェース」レッスンは無料ですか？

はい。「型付きFluentインターフェース」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「型付きFluentインターフェース」で何を学びますか？

型で蓄積された状態を追跡しながらメソッドを連鎖させます。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「型付きFluentインターフェース」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← TypeScript Academyに戻る