PlusMagi's Blog By Pitt Phunsanit Frontend TypeScript: การใช้งาน Callback

TypeScript: การใช้งาน Callback

ในโลกของการพัฒนาซอฟต์แวร์ที่ทันสมัย โดยเฉพาะอย่างยิ่งเมื่อเราต้องจัดการกับการทำงานแบบไม่พร้อมกัน (Asynchronous Operations) เช่น การดึงข้อมูลจาก API หรือการอ่านไฟล์ ระบบจำเป็นต้องมีกลไกในการรับรู้ว่างานบางส่วนจะเสร็จสิ้นลุล่วงได้ก็ต่อเมื่อเวลาผ่านไป บทบาทสำคัญของ Callback Function คือผู้แก้ไขปัญหานี้

TypeScript กับแนวคิดพื้นฐานของ Callbacks

โดยทั่วไปแล้ว Callback function คือฟังก์ชันที่เราส่งเป็นอาร์กิวเมนต์ให้กับฟังก์ชันอื่น เพื่อให้มันถูกเรียกใช้งานภายหลัง เมื่อกระบวนการหลัก ๆ ได้ดำเนินการสำเร็จหรือเกิดข้อผิดพลาด เทียบกับโค้ดปกติที่เป็นลำดับขั้นตอน เราใช้コールバックเพื่อกำหนด ‘สิ่งที่ควรทำต่อไป’ หลังจากที่มีเหตุการณ์ใดๆ เกิดขึ้น ไม่ว่าจะประสบความสำเร็จหรือไม่ก็ตาม นี่คือหัวใจของการเขียนโปรแกรมเชิง Event Driven ครับ.

บทบาทเด่นของ TypeScript ในระบบนิเวศนี้

หากพิจารณาเพียง JavaScript บริสุทธิ์ แม้วิธีการใช้ callbacks จะทรงพลัง แต่ปัญหาใหญ่คือเรื่อง Type Safety ซึ่งอาจนำไปสู่บั๊กที่ตรวจพบได้ยากในขณะ Runtime ต่างนั่นเอง ที่นี่แหละครับที่ TypeScript เข้ามาเติมเต็ม ด้วยการบังคับประเภทข้อมูล (Type Enforcement) ให้แก่ทั้งตัว callback เอง และค่า Argument ทั้งหมด ทำให้เราสามารถมั่นใจได้อย่างสูงว่า ฟังก์ชันที่จะรับเข้ามานั้นจะมี Signature ตรงตามที่คาดหวังไว้ตั้งแต่ตอน Compile Time


// การประกาศชนิดสำหรับ Callable Function
type DataCallback = (data: string, error?: Error) => void;

function fetchData(url: string, callback: DataCallback): void {
  setTimeout(() => {
    if (!url.includes('fail')) {
      callback(`Data from ${url}`, undefined);
    } else {
      callback('', new Error("Connection failed!"));
    }
  }, 100); // จำลอง Asynchronous Operation 
}

dataFetch('api/users', (result, err) => { /* ... */ });

ข้อจำกัดและวิวัฒนาการจาก Callback Hell

แม้ callbacks จะเป็นพื้นฐานสำคัญในการจัดการ Flow ของโปรแกรมแบบ Async แต่หากมีการเรียกใช้ฟังก์ชันที่มี Callbacks ซ้อนกันหลายชั้น อาจนำไปสู่สถานการณ์ที่เรียกว่า

Exit mobile version