PlusMagi's Blog By Pitt Phunsanit Frontend วิธีทำ Method Overriding ใน TypeScript: คู่มือฉบับสมบูรณ์สำหรับนักพัฒนา

วิธีทำ Method Overriding ใน TypeScript: คู่มือฉบับสมบูรณ์สำหรับนักพัฒนา

ในโลกของการพัฒนาซอฟต์แวร์เชิงวัตถุ (Object-Oriented Programming – OOP) แนวคิดเรื่องการสืบทอดคุณสมบัติและการทำงานของคลาสเป็นหัวใจสำคัญอย่างยิ่ง เมื่อเราต้องการสร้างโครงสร้างที่สามารถปรับแต่งพฤติกรรมเดิมให้เข้ากับบริบทใหม่ได้ เราจำเป็นต้องใช้กลไกที่เรียกว่า Method Overriding การทำความเข้าใจและประยุกต์ใช้วิธีนี้ได้อย่างถูกต้องถือเป็นทักษะระดับสูงสำหรับนักพัฒนาระดับมืออาชีพ โดยเฉพาะเมื่อใช้งาน TypeScript ซึ่งเพิ่มระบบ Type Safety ให้กับการเขียนโค้ด ทำให้มั่นใจว่าทุกขั้นตอนมีความเสถียร

หลักการพื้นฐาน: Polymorphism และ Inheritance

Method Overriding คือกระบวนการที่เรากำหนดเมธอดด้วยชื่อเดียวกันภายใน Subclass เพื่อแทนที่หรือเปลี่ยนแปลงตรรกะการทำงานของเมธอดนั้นๆ ที่ถูกนิยามไว้แล้วใน Superclass หลักการนี้นำไปสู่แนวคิดทาง OOP อันทรงพลังคือ ‘Polymorphism’ หรือภาวะหลายรูปแบบ กล่าวคือ อ็อบเจ็กต์ต่างชนิดกันแต่มีส่วนประกอบร่วม สามารถตอบสนองต่อคำสั่งชุดเดียวกัน แต่ด้วยวิธีการที่เป็นเอกลักษณ์ตามสายพันธุ์ของตัวเอง
💡 เคล็ดลับ System Specialist: สิ่งสำคัญที่สุดในการ Override ไม่ใช่แค่เปลี่ยนค่า return value เท่านั้น แต่รวมถึง việc รักษา Signature (จำนวนอาร์กิวเมนต์, ชนิดข้อมูล) ของฟังก์ชันเดิมให้เท่าเทียม เพื่อรักษาความเป็นระเบียบและความเข้ากันได้ของการเรียกใช้.

TypeScript Implementation ด้วยคีย์เวิร์ด `super`

เพื่อทำการ Method Overriding อย่างถูกต้องและปลอดภัย เราต้องอาศัยสององค์ประกอบหลักจาก TypeScript ได้แก่ คีย์เวิร์ด extends สำหรับประกาศว่า Class นี้สืบทอดมาจากไหน และคีย์เวิร์ด super ซึ่งช่วยให้อ้างอิงไปยังสมาชิกตัวแปรหรืองานเหล่านั้นของ Parent class ต้นฉบับ

  • SuperClass คือต้นแบบที่กำหนดโครงสร้างพื้นฐาน
  • SubClass คือชั้นลูกที่เราจะนำไปพัฒนาหรือปรับปรุงพฤติกรรมเฉพาะทาง
// Superclass กำหนด Behavior พื้นฐาน
class Animal {
  name: string;
  constructor(name: string) { this.name = name; }
  makeSound(): void {
    console.log(`สัตว์ชื่อ ${this.name} ส่งเสียง...`); // Default sound behavior
  }
}
// Subclass ทำการ Override เมธอด makeSound()
class Cat extends Animal {
  override makeSound(): void {
    super.makeSound(); // เรียกใช้ฟังก์ชันเดิมก่อน (Optional)
    console.log(