TypeScript Academy · บทเรียน

พื้นฐานการกลับทิศทางการควบคุม

ทำความเข้าใจเหตุผลและจังหวะที่ควรกลับทิศทางการพึ่งพา

บทเรียน 1 จาก 413 ขั้นตอน

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

การพึ่งพาที่กำหนดตายตัว

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

ตัวอย่างการผูกติดกันอย่างแน่นหนา

ในที่นี้บริการสร้าง logger ของตนเอง จึงไม่มีทางเปลี่ยนไปใช้ logger อื่นได้โดยไม่แก้ไขคลาส

class ConsoleLogger { log(m: string) { console.log(m); } }
class OrderService {
  private logger = new ConsoleLogger(); // hard-coded
  place() { this.logger.log("order placed"); }
}
new OrderService().place();

การควบคุมย้อนกลับคืออะไร

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

การฉีดการพึ่งพา

การฉีดการพึ่งพา (DI) เป็นวิธีทั่วไปในการทำให้เกิดการควบคุมย้อนกลับ โดยส่งส่วนประกอบที่ทำงานร่วมกันเข้ามาแทนการสร้างขึ้นภายใน ผู้เรียกใช้งานจะควบคุมว่าจะใช้การทำงานแบบใด

เวอร์ชันที่ฉีดการพึ่งพา

ตอนนี้ logger ถูกส่งมาจากภายนอก บริการจึงไม่จำเป็นต้องรู้หรือใส่ใจว่า logger ที่ได้รับมาเป็นการทำงานแบบใด

class OrderService {
  constructor(private logger: { log(m: string): void }) {}
  place() { this.logger.log("order placed"); }
}
new OrderService(new ConsoleLogger()).place();

เหตุใดการควบคุมย้อนกลับจึงช่วยให้ทดสอบได้ง่าย

เนื่องจากการพึ่งพามาจากภายนอก การทดสอบจึงสามารถส่งตัวจำลองหรือตัวตรวจสอบการเรียกใช้เข้ามาได้ คุณสามารถตรวจสอบพฤติกรรมโดยไม่ต้องใช้อินพุต/เอาต์พุตจริง ฐานข้อมูล หรือ calls ผ่านเครือข่าย

const calls: string[] = [];
const fakeLogger = { log: (m: string) => calls.push(m) };
new OrderService(fakeLogger).place();
console.log(calls); // ["order placed"]

พึ่งพาสิ่งที่เป็นนามธรรม

การควบคุมย้อนกลับทำงานได้ดีที่สุดเมื่อคลาสพึ่งพา อินเทอร์เฟซ แทนคลาสรูปธรรม การทำงานใด ๆ ที่ตรงตามอินเทอร์เฟซก็สามารถถูกฉีดเข้ามาได้

interface Logger { log(m: string): void; }
class OrderService {
  constructor(private logger: Logger) {}
}

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

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

class OrderService {
  constructor(private readonly logger: Logger) {}
}

การฉีดผ่านพร็อพเพอร์ตี

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

class OrderService {
  logger!: Logger; // set after construction
  place() { this.logger.log("placed"); }
}
const s = new OrderService();
s.logger = new ConsoleLogger();

การเลือกแนวทาง

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

ดูตัวอย่างคอนเทนเนอร์การควบคุมย้อนกลับ

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

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

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

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

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

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 101
บทเรียน: 352

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “พื้นฐานการกลับทิศทางการควบคุม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐานการกลับทิศทางการควบคุม”

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

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

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

บทเรียน “พื้นฐานการกลับทิศทางการควบคุม” ใช้เวลานานแค่ไหน

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

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

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

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

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