TypeScript Academy · บทเรียน

การฉีดผ่านตัวสร้าง

ฉีดสิ่งพึ่งพาผ่านตัวสร้างอย่างเป็นระเบียบ

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

เจาะลึกการฉีดผ่านคอนสตรักเตอร์

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

พร็อพเพอร์ตีจากพารามิเตอร์

TypeScript สามารถประกาศและกำหนดการพึ่งพาได้ในขั้นตอนเดียว โดยใช้ตัวปรับการเข้าถึงกับพารามิเตอร์ private readonly จะสร้างและกำหนดฟิลด์ให้โดยอัตโนมัติ

interface Mailer { send(to: string, body: string): void; }
class Notifier {
  constructor(private readonly mailer: Mailer) {}
}

การพึ่งพาที่อิงตามอินเทอร์เฟซ

การพึ่งพาอินเทอร์เฟซแทนคลาสช่วยแยกผู้ใช้บริการออกจากการทำงานแบบใดแบบหนึ่งโดยเฉพาะ อ็อบเจ็กต์ใด ๆ ที่ตรงตามอินเทอร์เฟซก็สามารถส่งเข้ามาได้

interface Mailer { send(to: string, body: string): void; }
class SmtpMailer implements Mailer {
  send(to: string, body: string) { console.log("SMTP ->", to); }
}

การเชื่อมต่อที่จุดรากของการประกอบ

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

class Notifier {
  constructor(private readonly mailer: Mailer) {}
  notify(to: string) { this.mailer.send(to, "hello"); }
}
const app = new Notifier(new SmtpMailer());
app.notify("a@b.com");

การสลับการทำงานแบบรูปธรรม

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

class FakeMailer implements Mailer {
  sent: string[] = [];
  send(to: string) { this.sent.push(to); }
}
const fake = new FakeMailer();
new Notifier(fake).notify("x@y.com");
console.log(fake.sent); // ["x@y.com"]

การทดสอบโดยไม่ใช้อินพุต/เอาต์พุตจริง

การฉีดตัวจำลองการส่งอีเมลช่วยให้ test ตรวจสอบสิ่งที่ควรถูกส่งได้โดยไม่ต้องส่งอีเมลจริง test จึงทำงานเร็ว ให้ผลคงที่ และแยกออกจากส่วนอื่น

const fake = new FakeMailer();
new Notifier(fake).notify("test@site");
console.log(fake.sent.length === 1); // true

การพึ่งพาหลายรายการ

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

interface Logger { log(m: string): void; }
class Notifier {
  constructor(
    private readonly mailer: Mailer,
    private readonly logger: Logger,
  ) {}
}

readonly ป้องกันการกำหนดค่าใหม่

การกำกับฟิลด์ที่ถูกฉีดด้วย readonly จะป้องกันไม่ให้ถูกสลับระหว่างอายุการใช้งาน ทำให้ส่วนประกอบที่ทำงานร่วมกับอ็อบเจ็กต์คงที่และคาดเดาได้

class Notifier {
  constructor(private readonly mailer: Mailer) {}
  // this.mailer = ... would be a compile error
}

ไม่มีการสร้างอ็อบเจ็กต์ซ่อนอยู่ภายใน

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

สิ่งที่จำเป็นเทียบกับสิ่งที่ไม่บังคับ

การพึ่งพาที่จำเป็นควรอยู่ในคอนสตรักเตอร์ ส่วนการพึ่งพาที่ไม่บังคับอย่างแท้จริงสามารถใช้การทำงานแบบไม่ทำอะไรเป็นค่าเริ่มต้นได้ แต่ยังคงต้องส่งเข้ามาแทนการสร้างไว้ภายใน

const noopLogger: Logger = { log() {} };
new Notifier(new SmtpMailer(), noopLogger);

สรุปประโยชน์

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

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจสั้น ๆ เกี่ยวกับบทเรียนนี้

สรุปทบทวน

การฉีดผ่านคอนสตรักเตอร์ ประกาศการพึ่งพาเป็นพารามิเตอร์ ซึ่งมักระบุชนิดด้วย private readonly ผ่านอินเทอร์เฟซ จุดรากของการประกอบจะเลือกการทำงาน ส่วนการทดสอบจะส่งตัวจำลองเข้ามา อ็อบเจ็กต์จึงเชื่อมต่อการพึ่งพาครบถ้วนเสมอ และส่วนประกอบที่ทำงานร่วมกันสามารถสลับได้โดยไม่ต้องแก้ไขคลาส

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

บทเรียน “การฉีดผ่านตัวสร้าง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การฉีดผ่านตัวสร้าง”

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

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

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

บทเรียน “การฉีดผ่านตัวสร้าง” ใช้เวลานานแค่ไหน

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

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

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

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

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