TypeScript Academy · Lekcja

Podstawy wzorca Builder

Konstruuj złożone obiekty krok po kroku

Podstawy wzorca Builder to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Po co stosować Builder

Niektóre obiekty wymagają wielu pól, a konstruowanie ich za pomocą ogromnego konstruktora pełnego argumentów pozycyjnych jest podatne na błędy. Wzorzec Builder konstruuje złożony obiekt krok po kroku, za pomocą kolejnych nazwanych wywołań.

Obiekt, którego potrzebujemy

Proszę wyobrazić sobie żądanie HTTP zawierające url, method, headers i body. Przekazanie wszystkich tych elementów do jednego konstruktora utrudnia odczytanie kodu. Builder pozwala ustawić każdą część za pomocą jasno nazwanej metody.

interface HttpRequest {
  url: string;
  method: string;
  headers: Record<string, string>;
  body?: string;
}

Podstawowa klasa Builder

Builder przechowuje wewnętrznie częściowy stan i udostępnia metody ustawiające. Każda z nich modyfikuje stan wewnętrzny i odpowiada za jedno pole.

class RequestBuilder {
  private url = "";
  private method = "GET";
  private headers: Record<string, string> = {};
  private body?: string;
}

Łańcuch wywołań metod zwraca this

Sposobem na płynny zapis builderów jest zwracanie this z każdej metody ustawiającej. Ponieważ każda metoda zwraca ten sam builder, można łączyć wywołania w łańcuch.

class RequestBuilder {
  private url = "";
  setUrl(u: string): this {
    this.url = u;
    return this;
  }
}

Dodawanie kolejnych kroków

Każdy krok konfiguracji przebiega według tego samego schematu: zapisz wartość, a następnie zwróć this. Proszę zauważyć, że typ zwracany this zachowuje konkretny typ buildera w całym łańcuchu.

  setMethod(m: string): this {
    this.method = m;
    return this;
  }
  addHeader(k: string, v: string): this {
    this.headers[k] = v;
    return this;
  }

Metoda build()

Na końcu metoda build() składa zgromadzony stan w gotowy obiekt. Jest to jedyna metoda, która nie zwraca buildera.

  build(): HttpRequest {
    return {
      url: this.url,
      method: this.method,
      headers: this.headers,
      body: this.body,
    };
  }

Korzystanie z Buildera

Teraz konstrukcja obiektu przypomina zdanie. Każdy krok ma nazwę, kolejność jest elastyczna i nie trzeba już zarządzać argumentami pozycyjnymi.

const req = new RequestBuilder()
  .setUrl("https://api.test")
  .setMethod("POST")
  .addHeader("Accept", "application/json")
  .build();
console.log(req.method);

Pełny działający przykład

Oto samodzielny przykład, który można uruchomić. Builder gromadzi stan, a build() tworzy końcowy obiekt wyglądający na niezmienny.

interface Req { url: string; method: string }
class B {
  private url = ""; private method = "GET";
  setUrl(u: string): this { this.url = u; return this; }
  setMethod(m: string): this { this.method = m; return this; }
  build(): Req { return { url: this.url, method: this.method }; }
}
const r = new B().setUrl("/users").setMethod("POST").build();
console.log(r.url, r.method);

Wartości domyślne są dostępne od razu

Ponieważ Builder inicjalizuje pola rozsądnymi wartościami domyślnymi, wywołujący musi nadpisać tylko te, których potrzebuje. Nieustawione kroki zachowują po prostu wartości domyślne.

const getReq = new B().setUrl("/health").build();
console.log(getReq.method); // GET (default)

Czytelność a konstruktory

Proszę porównać new Req("/x", "POST", {}, undefined) z łańcuchem wywołań Buildera. Wersja z Builderem wyjaśnia intencję na każdym kroku i pozwala uniknąć niejasnych symboli zastępczych undefined.

Kiedy warto go użyć

Buildera warto użyć, gdy obiekt ma wiele opcjonalnych elementów, gdy konstrukcja przebiega etapami albo gdy potrzebny jest czytelny i samodokumentujący się interfejs API. W przypadku dwóch lub trzech pól prosty literał obiektu będzie łatwiejszy.

Szybkie sprawdzenie

Szybkie sprawdzenie wiadomości z tej lekcji.

Podsumowanie

Builder konstruuje złożone obiekty krok po kroku. Settery przechowują po jednym polu i zwracają this, aby umożliwić łańcuchowe wywołania, natomiast build() składa końcowy obiekt. Buildery szczególnie dobrze sprawdzają się w przypadku obiektów z wieloma opcjonalnymi elementami.

Często zadawane pytania

Czy lekcja „Podstawy wzorca Builder” jest bezpłatna?

Tak — pełny tekst „Podstawy wzorca Builder” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Podstawy wzorca Builder”?

Konstruuj złożone obiekty krok po kroku Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Podstawy wzorca Builder”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do TypeScript Academy