TypeScript Academy · บทเรียน

พื้นฐานรูปแบบ Builder

สร้างออบเจ็กต์ที่ซับซ้อนทีละขั้นตอน

พื้นฐานรูปแบบ Builder เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องใช้ตัวสร้าง

ออบเจ็กต์บางชนิดมีฟิลด์จำนวนมาก และการสร้างด้วยตัวสร้างขนาดใหญ่ที่เต็มไปด้วยอาร์กิวเมนต์ตามตำแหน่งอาจทำให้เกิดข้อผิดพลาดได้ง่าย รูปแบบตัวสร้าง จะสร้างออบเจ็กต์ที่ซับซ้อน ทีละขั้นตอน โดยเรียกใช้เมธอดที่มีชื่อระบุอย่างชัดเจนทีละครั้ง

ออบเจ็กต์ที่เราต้องการ

ลองนึกถึงคำขอ HTTP ที่มี url, method, headers และ body การส่งค่าทั้งหมดนี้ให้ตัวสร้างเดียวอ่านได้ยาก ตัวสร้างช่วยให้เรากำหนดแต่ละส่วนด้วยเมธอดที่มีชื่อชัดเจน

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

คลาสตัวสร้างพื้นฐาน

ตัวสร้างจะเก็บสถานะบางส่วนไว้ภายในและเปิดเผยเมธอดตัวตั้งค่า เมธอดตัวตั้งค่าแต่ละตัวจะเปลี่ยนแปลงสถานะภายในและรับผิดชอบฟิลด์หนึ่งรายการ

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

การเชื่อมโยงเมธอดคืนค่า this

เคล็ดลับที่ทำให้ตัวสร้างอ่านได้อย่างลื่นไหลคือการคืนค่า this จากเมธอดตัวตั้งค่าทุกตัว เนื่องจากแต่ละเมธอดคืนค่าตัวสร้างเดิม คุณจึงเชื่อมโยง calls เข้าด้วยกันได้

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

การเพิ่มขั้นตอนเพิ่มเติม

ขั้นตอนการกำหนดค่าแต่ละขั้นใช้รูปแบบเดียวกัน คือจัดเก็บค่าแล้วคืนค่า this โปรดสังเกตว่าชนิดข้อมูลผลลัพธ์ this ช่วยคงชนิดของตัวสร้างจริงไว้ตลอดการเชื่อมโยง

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

เมธอด build()

สุดท้าย เมธอด build() จะประกอบสถานะที่สะสมไว้ให้เป็นออบเจ็กต์ที่เสร็จสมบูรณ์ เมธอดนี้เป็นเมธอดเดียวที่ไม่คืนค่าตัวสร้าง

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

การใช้ตัวสร้าง

ตอนนี้การสร้างออบเจ็กต์อ่านได้ราวกับประโยค แต่ละขั้นมีชื่อชัดเจน ลำดับสามารถยืดหยุ่นได้ และคุณไม่ต้องจัดการกับอาร์กิวเมนต์ตามตำแหน่ง

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

ตัวอย่างที่ทำงานได้อย่างสมบูรณ์

นี่คือตัวอย่างแบบในตัวที่คุณสามารถเรียกใช้ได้ ตัวสร้างจะสะสมสถานะ และ build() จะสร้างออบเจ็กต์สุดท้ายที่มีลักษณะเหมือนไม่สามารถเปลี่ยนแปลงได้

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);

มีค่าเริ่มต้นให้โดยอัตโนมัติ

เนื่องจากตัวสร้างกำหนดค่าเริ่มต้นที่เหมาะสมให้กับฟิลด์ ผู้เรียกจึงเปลี่ยนเฉพาะค่าที่ต้องการได้ ขั้นตอนที่ไม่ได้กำหนดจะคงค่าเริ่มต้นไว้

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

ความอ่านง่ายเมื่อเทียบกับตัวสร้าง

เปรียบเทียบ new Req("/x", "POST", {}, undefined) กับตัวสร้างที่เชื่อมโยงกัน ตัวสร้างแบบหลังสื่อเจตนาในทุกขั้นตอน และหลีกเลี่ยงตัวยึดตำแหน่ง undefined ที่ไม่ชัดเจน

ควรเลือกใช้เมื่อใด

ใช้ตัวสร้างเมื่อออบเจ็กต์มีส่วนประกอบเสริมจำนวนมาก เมื่อการสร้างเกิดขึ้นเป็นขั้นตอน หรือเมื่อคุณต้องการ API ที่อ่านง่ายและอธิบายการใช้งานได้ด้วยตัวเอง หากมีเพียงสองหรือสามฟิลด์ ออบเจ็กต์ลิเทอรัลธรรมดาจะง่ายกว่า

ตรวจสอบอย่างรวดเร็ว

ตรวจสอบความเข้าใจบทเรียนนี้อย่างรวดเร็ว

ทบทวน

ตัวสร้างจะสร้างอ็อบเจ็กต์ซับซ้อนทีละขั้น เมธอดกำหนดค่าแต่ละเมธอดจะเก็บฟิลด์หนึ่งฟิลด์และคืนค่า this เพื่อให้เรียกต่อกันเป็นสายได้ ขณะที่ build() จะประกอบอ็อบเจ็กต์สุดท้าย ตัวสร้างเหมาะอย่างยิ่งเมื่ออ็อบเจ็กต์มีส่วนประกอบทางเลือกจำนวนมาก

คำถามที่พบบ่อย

บทเรียน “พื้นฐานรูปแบบ Builder” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐานรูปแบบ Builder” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐานรูปแบบ Builder”

สร้างออบเจ็กต์ที่ซับซ้อนทีละขั้นตอน คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “พื้นฐานรูปแบบ Builder” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ TypeScript Academy