Grunderna i Builder Pattern
Skapa komplexa objekt steg för steg.
Grunderna i Builder Pattern är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
Varför en builder?
Vissa objekt behöver många fält, och det är felbenäget att skapa dem med en jättestor konstruktor full av positionsbaserade argument. Builder-mönstret konstruerar ett komplext objekt steg för steg, ett namngivet anrop i taget.
Objektet vi vill skapa
Föreställ er en HTTP-begäran med en URL, metod, headers och body. Det är svårläst att skicka allt till en enda konstruktor. Med en builder kan varje del anges med en tydligt namngiven metod.
interface HttpRequest {
url: string;
method: string;
headers: Record<string, string>;
body?: string;
}En grundläggande builder-klass
Buildern lagrar ett delvis ifyllt tillstånd internt och tillhandahåller setter-metoder. Varje setter ändrar det interna tillståndet och ansvarar för ett fält.
class RequestBuilder {
private url = "";
private method = "GET";
private headers: Record<string, string> = {};
private body?: string;
}Metodkedjor returnerar this
Det som gör builder-anrop lättlästa i kedja är att varje setter returnerar this. Eftersom varje metod returnerar samma builder kan anropen kedjas ihop.
class RequestBuilder {
private url = "";
setUrl(u: string): this {
this.url = u;
return this;
}
}Lägga till fler steg
Varje konfigurationssteg följer samma mönster: lagra värdet och returnera sedan this. Observera att returtypen this bevarar den konkreta builder-typen genom hela kedjan.
setMethod(m: string): this {
this.method = m;
return this;
}
addHeader(k: string, v: string): this {
this.headers[k] = v;
return this;
}Metoden build()
Slutligen sammanställer en build()-metod det ackumulerade tillståndet till det färdiga objektet. Det här är den enda metoden som inte returnerar buildern.
build(): HttpRequest {
return {
url: this.url,
method: this.method,
headers: this.headers,
body: this.body,
};
}Använda buildern
Nu läses konstruktionen som en mening. Varje steg är namngivet, ordningen är flexibel och ni behöver aldrig hantera positionsbaserade argument.
const req = new RequestBuilder()
.setUrl("https://api.test")
.setMethod("POST")
.addHeader("Accept", "application/json")
.build();
console.log(req.method);Ett komplett körbart exempel
Här är en fristående version som ni kan köra. Buildern samlar ihop tillståndet och build() skapar det slutliga objektet som ser oföränderligt ut.
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);Standardvärden ingår
Eftersom buildern initierar fält med rimliga standardvärden behöver anroparen bara ändra det som behövs. Steg som inte anges behåller helt enkelt sina standardvärden.
const getReq = new B().setUrl("/health").build();
console.log(getReq.method); // GET (default)Läsbarhet kontra konstruktorer
Jämför new Req("/x", "POST", {}, undefined) med den kedjade buildern. Builder-versionen dokumenterar avsikten i varje steg och undviker svårbegripliga undefined-platshållare.
När den passar
Använd en builder när ett objekt har många valfria delar, när konstruktionen sker i flera steg eller när ni vill ha ett läsbart och självförklarande API. För två eller tre fält är ett vanligt objektliteral enklare.
Kort kontroll
En kort kontroll av den här lektionen.
Sammanfattning
En builder konstruerar komplexa objekt steg för steg. Setter-metoder lagrar ett fält var och returnerar this så att anrop kan kedjas, medan build() sätter ihop det slutliga objektet. Builders är särskilt användbara när objekt har många valfria delar.
Lär dig TypeScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 101
- Lektioner
- 352
Vanliga frågor
Är lektionen ”Grunderna i Builder Pattern” gratis?
Ja – hela texten till ”Grunderna i Builder Pattern” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Grunderna i Builder Pattern”?
Skapa komplexa objekt steg för steg. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?
Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Grunderna i Builder Pattern”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?
Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Grunderna i Builder Pattern
- Fluent interfaces med typer
- Säkerställ obligatoriska steg
- Oföränderliga builders