รูปแบบ OOP ใน TypeScript: แนวทางในการออกแบบคลาสและกลยุทธ์การสืบทอด

ในโลกของการพัฒนาซอฟต์แวร์สมัยใหม่ TypeScript ได้กลายเป็นรากฐานที่สำคัญสำหรับการสร้างแอปพลิเคชันที่แข็งแกร่ง ปรับขนาดได้ และบำรุงรักษาได้ ระบบการพิมพ์ที่แข็งแกร่งซึ่งสร้างขึ้นบน JavaScript ช่วยให้นักพัฒนาระบุข้อผิดพลาดได้ตั้งแต่เนิ่นๆ และเขียนโค้ดที่คาดเดาได้มากขึ้น หัวใจสำคัญของพลังของ TypeScript คือการรองรับหลักการเขียนโปรแกรมเชิงวัตถุ (OOP) อย่างครอบคลุม อย่างไรก็ตาม เพียงแค่รู้วิธีสร้างคลาสยังไม่เพียงพอ การเรียนรู้ TypeScript ให้เชี่ยวชาญต้องอาศัยความเข้าใจอย่างลึกซึ้งเกี่ยวกับการออกแบบคลาส ลำดับชั้นการสืบทอด และข้อดีข้อเสียระหว่างรูปแบบสถาปัตยกรรมที่แตกต่างกัน

คู่มือนี้ออกแบบมาสำหรับนักพัฒนาทั่วโลก ตั้งแต่ผู้ที่ต้องการเสริมสร้างทักษะระดับกลางไปจนถึงสถาปนิกผู้ช่ำชอง เราจะเจาะลึกแนวคิดหลักของ OOP ใน TypeScript สำรวจกลยุทธ์การออกแบบคลาสที่มีประสิทธิภาพ และจัดการกับการถกเถียงที่มีมายาวนาน: การสืบทอดเทียบกับการประกอบ เมื่อจบแล้ว คุณจะมีความรู้ในการตัดสินใจออกแบบอย่างมีข้อมูล ซึ่งนำไปสู่โค้ดเบสที่สะอาด ยืดหยุ่น และรองรับอนาคตมากขึ้น

ทำความเข้าใจเสาหลักของ OOP ใน TypeScript

ก่อนที่เราจะเจาะลึกลงไปในรูปแบบที่ซับซ้อน เรามาสร้างรากฐานที่มั่นคงโดยทบทวนเสาหลักสี่ประการของการเขียนโปรแกรมเชิงวัตถุตามที่ใช้กับ TypeScript

1. การห่อหุ้ม

การห่อหุ้มคือหลักการของการรวมข้อมูล (คุณสมบัติ) ของออบเจ็กต์และเมธอดที่ดำเนินการกับข้อมูลนั้นไว้ในหน่วยเดียว—คลาส นอกจากนี้ยังเกี่ยวข้องกับการจำกัดการเข้าถึงโดยตรงไปยังสถานะภายในของออบเจ็กต์ TypeScript ทำได้โดยหลักผ่านตัวปรับแต่งการเข้าถึง: public, private และ protected

ตัวอย่าง: บัญชีธนาคารที่สามารถแก้ไขยอดเงินได้ผ่านวิธีการฝากและถอนเท่านั้น

            class BankAccount {
  private balance: number = 0;

  constructor(initialBalance: number) {
    if (initialBalance >= 0) {
      this.balance = initialBalance;
    }
  }

  public deposit(amount: number): void {
    if (amount > 0) {
      this.balance += amount;
      console.log(`Deposited: ${amount}. New balance: ${this.balance}`);
    }
  }

  public getBalance(): number {
    // We expose the balance through a method, not directly
    return this.balance;
  }
}

            

              
                Copy
              
            
          

2. นามธรรม

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

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

3. การสืบทอด

การสืบทอดเป็นกลไกที่คลาสใหม่ (คลาสย่อยหรือคลาสที่ได้รับ) สืบทอดคุณสมบัติและเมธอดจากคลาสที่มีอยู่ (คลาสซุปเปอร์หรือคลาสฐาน) ส่งเสริมการใช้โค้ดซ้ำและสร้างความสัมพันธ์ "is-a" ที่ชัดเจนระหว่างคลาส TypeScript ใช้คีย์เวิร์ด extends สำหรับการสืบทอด

ตัวอย่าง: `Manager` เป็นประเภท `Employee` พวกเขาแบ่งปันคุณสมบัติทั่วไปเช่น `name` และ `id` แต่ `Manager` อาจมีคุณสมบัติเพิ่มเติมเช่น `subordinates`

            class Employee {
  constructor(public name: string, public id: number) {}

  getProfile(): string {
    return `Name: ${this.name}, ID: ${this.id}`;
  }
}

class Manager extends Employee {
  constructor(name: string, id: number, public subordinates: Employee[]) {
    super(name, id); // Call the parent constructor
  }

  // Managers can also have their own methods
  delegateTask(): void {
    console.log(`${this.name} is delegating tasks.`);
  }
}

            

              
                Copy
              
            
          

4. พอลีมอร์ฟิซึม

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

ตัวอย่าง: เมธอด `render()` ที่ทำงานแตกต่างกันสำหรับออบเจ็กต์ `Circle` เทียบกับออบเจ็กต์ `Square` แม้ว่าทั้งคู่จะเป็น `Shape`

            abstract class Shape {
  abstract draw(): void; // An abstract method must be implemented by subclasses
}

class Circle extends Shape {
  draw(): void {
    console.log("Drawing a circle.");
  }
}

class Square extends Shape {
  draw(): void {
    console.log("Drawing a square.");
  }
}

function renderShapes(shapes: Shape[]): void {
  shapes.forEach(shape => shape.draw()); // Polymorphism in action!
}

const myShapes: Shape[] = [new Circle(), new Square()];
renderShapes(myShapes);
// Output:
// Drawing a circle.
// Drawing a square.

            

              
                Copy
              
            
          

การถกเถียงครั้งใหญ่: การสืบทอดเทียบกับการประกอบ

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

การสืบทอดคืออะไร? ความสัมพันธ์ "is-a"

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

• ข้อดี:
  • การใช้โค้ดซ้ำ: ตรรกะทั่วไปถูกกำหนดไว้ครั้งเดียวในคลาสฐาน
  • พอลีมอร์ฟิซึม: อนุญาตให้มีลักษณะการทำงานแบบพอลีมอร์ฟิกที่สง่างามดังที่เห็นในตัวอย่าง `Shape` ของเรา
  • ลำดับชั้นที่ชัดเจน: เป็นแบบจำลองระบบการจำแนกประเภทจากบนลงล่างในโลกแห่งความเป็นจริง
• ข้อเสีย:
  • การเชื่อมโยงที่แน่นแฟ้น: การเปลี่ยนแปลงในคลาสฐานอาจทำให้คลาสที่ได้รับเสียหายโดยไม่ได้ตั้งใจ สิ่งนี้เรียกว่า "ปัญหาคลาสฐานที่เปราะบาง"
  • Hierarchy Hell: การใช้งานมากเกินไปอาจนำไปสู่สายโซ่การสืบทอดที่ซับซ้อนและแข็งทื่อซึ่งยากต่อการเข้าใจและบำรุงรักษา
  • Inflexible: คลาสสามารถสืบทอดได้จากคลาสอื่นเพียงคลาสเดียวใน TypeScript (การสืบทอดเดี่ยว) ซึ่งอาจเป็นข้อจำกัด คุณไม่สามารถสืบทอดคุณสมบัติจากหลายคลาสที่ไม่เกี่ยวข้องกันได้

เมื่อใดที่การสืบทอดเป็นตัวเลือกที่ดี

ใช้การสืบทอดเมื่อความสัมพันธ์เป็น "is-a" อย่างแท้จริงและมีความเสถียรและไม่น่าจะเปลี่ยนแปลง ตัวอย่างเช่น `CheckingAccount` และ `SavingsAccount` เป็นประเภทของ `BankAccount` โดยพื้นฐาน ลำดับชั้นนี้สมเหตุสมผลและไม่น่าจะถูกปรับเปลี่ยน

การประกอบคืออะไร? ความสัมพันธ์ "has-a"

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

• ข้อดี:
  • ความยืดหยุ่น: ฟังก์ชันการทำงานสามารถเปลี่ยนแปลงได้ในขณะรันไทม์โดยการสลับออบเจ็กต์ที่ประกอบ
  • การเชื่อมโยงที่หลวม: คลาสที่บรรจุไม่จำเป็นต้องรู้การทำงานภายในของส่วนประกอบที่ใช้ สิ่งนี้ทำให้โค้ดง่ายต่อการทดสอบและบำรุงรักษา
  • หลีกเลี่ยงปัญหาลำดับชั้น: คุณสามารถรวมฟังก์ชันการทำงานจากแหล่งต่างๆ ได้โดยไม่ต้องสร้างแผนผังการสืบทอดที่ซับซ้อน
  • ความรับผิดชอบที่ชัดเจน: แต่ละคลาสส่วนประกอบสามารถปฏิบัติตามหลักการความรับผิดชอบเดียวได้
• ข้อเสีย:
  • Boilerplate เพิ่มเติม: บางครั้งอาจต้องใช้โค้ดมากขึ้นในการเชื่อมต่อส่วนประกอบต่างๆ เมื่อเทียบกับโมเดลการสืบทอดอย่างง่าย
  • Less Intuitive for Hierarchies: ไม่ได้สร้างแบบจำลองอนุกรมวิธานตามธรรมชาติโดยตรงเหมือนกับการสืบทอด

ตัวอย่างเชิงปฏิบัติ: รถยนต์

`Car` เป็นตัวอย่างที่สมบูรณ์แบบของการประกอบ `Car` ไม่ใช่ประเภทของ `Engine` และไม่ใช่ประเภทของ `Wheel` แต่ `Car` มี `Engine` และ มี `Wheels`

            // Component classes
class Engine {
  start() {
    console.log("Engine starting...");
  }
}

class GPS {
  navigate(destination: string) {
    console.log(`Navigating to ${destination}...`);
  }
}

// The composite class
class Car {
  private readonly engine: Engine;
  private readonly gps: GPS;

  constructor() {
    // The Car creates its own parts
    this.engine = new Engine();
    this.gps = new GPS();
  }

  driveTo(destination: string) {
    this.engine.start();
    this.gps.navigate(destination);
    console.log("Car is on its way.");
  }
}

const myCar = new Car();
myCar.driveTo("New York City");
            

              
                Copy
              
            
          

การออกแบบนี้มีความยืดหยุ่นสูง หากเราต้องการสร้าง `Car` ด้วย `ElectricEngine` เราไม่จำเป็นต้องมีสายโซ่การสืบทอดใหม่ เราสามารถใช้ Dependency Injection เพื่อจัดหา `Car` ด้วยส่วนประกอบ ทำให้มีความเป็นโมดูลมากขึ้น

            interface IEngine {
  start(): void;
}

class PetrolEngine implements IEngine {
  start() { console.log("Petrol engine starting..."); }
}

class ElectricEngine implements IEngine {
  start() { console.log("Silent electric engine starting..."); }
}

class AdvancedCar {
  // The car depends on an abstraction (interface), not a concrete class
  constructor(private engine: IEngine) {}

  startJourney() {
    this.engine.start();
    console.log("Journey has begun.");
  }
}

const tesla = new AdvancedCar(new ElectricEngine());
tesla.startJourney();

const ford = new AdvancedCar(new PetrolEngine());
ford.startJourney();
            

              
                Copy
              
            
          

กลยุทธ์และรูปแบบขั้นสูงใน TypeScript

นอกเหนือจากการเลือกระหว่างการสืบทอดและการประกอบพื้นฐานแล้ว TypeScript ยังมีเครื่องมือที่มีประสิทธิภาพสำหรับการสร้างการออกแบบคลาสที่ซับซ้อนและยืดหยุ่น

1. Abstract Classes: The Blueprint for Inheritance

เมื่อคุณมีความสัมพันธ์ "is-a" ที่แข็งแกร่ง แต่ต้องการให้แน่ใจว่าไม่สามารถสร้างอินสแตนซ์คลาสฐานได้ด้วยตัวเอง ให้ใช้คลาส `abstract` ทำหน้าที่เป็นพิมพ์เขียว กำหนดเมธอดและคุณสมบัติทั่วไป และสามารถประกาศเมธอด `abstract` ที่คลาสที่ได้รับ ต้อง นำไปใช้

Use Case: ระบบประมวลผลการชำระเงิน คุณรู้ว่าทุกเกตเวย์ต้องมีเมธอด `pay()` และ `refund()` แต่การใช้งานนั้นเฉพาะเจาะจงสำหรับผู้ให้บริการแต่ละราย (เช่น Stripe, PayPal)

            abstract class PaymentGateway {
  constructor(public apiKey: string) {}

  // A concrete method shared by all subclasses
  protected connect(): void {
    console.log("Connecting to payment service...");
  }

  // Abstract methods that subclasses must implement
  abstract processPayment(amount: number): boolean;
  abstract issueRefund(transactionId: string): boolean;
}

class StripeGateway extends PaymentGateway {
  processPayment(amount: number): boolean {
    this.connect();
    console.log(`Processing ${amount} via Stripe.`);
    return true;
  }

  issueRefund(transactionId: string): boolean {
    console.log(`Refunding transaction ${transactionId} via Stripe.`);
    return true;
  }
}

// const gateway = new PaymentGateway("key"); // Error: Cannot create an instance of an abstract class.
const stripe = new StripeGateway("sk_test_123");
stripe.processPayment(100);
            

              
                Copy
              
            
          

2. Interfaces: Defining Contracts for Behavior

Interfaces ใน TypeScript เป็นวิธีในการกำหนดสัญญาสำหรับรูปร่างของคลาส ระบุคุณสมบัติและเมธอดที่คลาสต้องมี แต่ไม่ได้ให้การใช้งานใดๆ คลาสสามารถ `implement` หลายอินเทอร์เฟซ ทำให้เป็นรากฐานของการออกแบบองค์ประกอบและการแยกส่วน

Interface vs. Abstract Class

• ใช้ abstract class เมื่อคุณต้องการแชร์โค้ดที่ใช้งานในคลาสที่เกี่ยวข้องอย่างใกล้ชิดหลายคลาส
• ใช้ interface เมื่อคุณต้องการกำหนดสัญญาสำหรับลักษณะการทำงานที่สามารถใช้งานได้โดยคลาสที่ไม่เกี่ยวข้องกันและแตกต่างกัน

Use Case: ในระบบ ออบเจ็กต์ต่างๆ มากมายอาจต้องถูกทำให้เป็นอนุกรมเป็นรูปแบบสตริง (เช่น สำหรับการบันทึกหรือการจัดเก็บ) ออบเจ็กต์เหล่านี้ (`User`, `Product`, `Order`) ไม่เกี่ยวข้องกัน แต่มีความสามารถทั่วไป

            interface ISerializable {
  serialize(): string;
}

class User implements ISerializable {
  constructor(public id: number, public name: string) {}

  serialize(): string {
    return JSON.stringify({ id: this.id, name: this.name });
  }
}

class Product implements ISerializable {
  constructor(public sku: string, public price: number) {}

  serialize(): string {
    return JSON.stringify({ sku: this.sku, price: this.price });
  }
}

function logItems(items: ISerializable[]): void {
  items.forEach(item => {
    console.log("Serialized item:", item.serialize());
  });
}

const user = new User(1, "Alice");
const product = new Product("TSHIRT-RED", 19.99);
logItems([user, product]);
            

              
                Copy
              
            
          

3. Mixins: A Compositional Approach to Code Reuse

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

Use Case: คุณต้องการเพิ่มลักษณะการทำงาน `Timestamp` (ด้วย `createdAt`, `updatedAt`) และ `SoftDeletable` (ด้วยคุณสมบัติ `deletedAt` และเมธอด `softDelete()`) ให้กับคลาสโมเดลหลายคลาส

            // A Type helper for mixins
type Constructor = new (...args: any[]) => T;

// Timestamp Mixin
function Timestamped(Base: TBase) {
  return class extends Base {
    createdAt: Date = new Date();
    updatedAt: Date = new Date();
  };
}

// SoftDeletable Mixin
function SoftDeletable(Base: TBase) {
  return class extends Base {
    deletedAt: Date | null = null;

    softDelete() {
      this.deletedAt = new Date();
      console.log("Item has been soft deleted.");
    }
  };
}

// Base class
class DocumentModel {
  constructor(public title: string) {}
}

// Create a new class by composing mixins
const UserAccountModel = SoftDeletable(Timestamped(DocumentModel));

const userAccount = new UserAccountModel("My User Account");
console.log(userAccount.title);
console.log(userAccount.createdAt);
userAccount.softDelete();
console.log(userAccount.deletedAt);
            

              
                Copy
              
            
          

บทสรุป: การสร้างแอปพลิเคชัน TypeScript ที่รองรับอนาคต

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

ต่อไปนี้เป็นประเด็นสำคัญสำหรับแนวทางการพัฒนาทั่วโลกของคุณ:

1. เริ่มต้นด้วยเสาหลัก: ตรวจสอบให้แน่ใจว่าคุณมีความเข้าใจที่มั่นคงเกี่ยวกับการห่อหุ้ม นามธรรม การสืบทอด และพอลีมอร์ฟิซึม เป็นคำศัพท์ของ OOP
2. นิยมการประกอบมากกว่าการสืบทอด: หลักการนี้จะนำคุณไปสู่โค้ดที่ยืดหยุ่น เป็นโมดูล และทดสอบได้มากขึ้น เริ่มต้นด้วยการประกอบและใช้การสืบทอดเฉพาะเมื่อมีความสัมพันธ์ "is-a" ที่ชัดเจนและเสถียร
3. ใช้เครื่องมือที่เหมาะสมกับงาน:
   • ใช้ การสืบทอด สำหรับความเชี่ยวชาญเฉพาะทางที่แท้จริงและการแชร์โค้ดในลำดับชั้นที่เสถียร
   • ใช้ Abstract Classes เพื่อกำหนดฐานทั่วไปสำหรับกลุ่มคลาสที่แชร์การใช้งานบางอย่างในขณะที่บังคับใช้สัญญา
   • ใช้ Interfaces เพื่อกำหนดสัญญาสำหรับลักษณะการทำงานที่สามารถใช้งานได้โดยคลาสใดๆ ส่งเสริมการแยกส่วนอย่างมาก
   • ใช้ Mixins เมื่อคุณต้องการรวมฟังก์ชันการทำงานเข้ากับคลาสจากหลายแหล่ง เอาชนะข้อจำกัดของการสืบทอดเดี่ยว

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