PlusMagi's Blog By Pitt Phunsanit Frontend คู่มือ TypeScript: ทำความเข้าใจและใช้งาน `void` Type อย่างถูกต้อง

คู่มือ TypeScript: ทำความเข้าใจและใช้งาน `void` Type อย่างถูกต้อง

ประเภทแห่งความว่างเปล่าใน TypeScript: คู่มือการใช้งานและทำความเข้าใจ Type ‘void’

TypeScript คือเครื่องมือที่ช่วยยกระดับ JavaScript ด้วยระบบ Static Typing ทำให้เราสามารถตรวจจับข้อผิดพลาดของโค้ดได้ตั้งแต่ขั้นตอนคอมไพล์ก่อนที่จะรันจริง ในบรรดา Primitive Types ต่างๆ นั้น มีหนึ่งตัวแปรชนิดข้อมูลที่มีลักษณะเฉพาะคือ void ซึ่งหลายครั้งนักพัฒนาอาจสับสนถึงบทบาทและความจำเป็นในการใช้มัน บทความนี้จะพาคุณดำดิ่งสู่แก่นแท้ของการทำงานของ void เพื่อให้มั่นใจว่าทุกฟังก์ชันที่คุณสร้างขึ้นนั้นมีความแม่นยำทางตรรกะสูงสุด

💡 void คืออะไร? ทำไมต้องมีอยู่เมื่อไม่มีค่ากลับมาเลย?

โดยพื้นฐานแล้ว เมื่อเรารับรู้คำว่า ‘Void’ มันหมายถึงภาวะสุญญากาศ หรือราส่วนศูนย์ การประกาศว่าเป็น type void ไม่ได้แปลว่าผลลัพธ์เป็น null เสมอไป แต่เป็นการบอก Compiler อย่างชัดเจนที่สุดว่า ฟังก์ชันหรือบล็อกโค้ดดังกล่าว **จะไม่ส่งคืน (return) ค่าใด ๆ ที่ถูกกำหนดประเภทอย่างเจาะจง** ออกไปยังภายนอก แม้ในโลกการเขียนโปรแกรมทั่วไป เรามักเข้าใจว่าถ้าไม่ return อะไร ก็ถือว่างเปล่า แต่มุมมองแบบ Type System ต้องการมากกว่าแค่ ‘ดูเหมือน’ ว่างเปล่า นี่จึงทำให้เรานิยามด้วยไทป์ที่แข็งแรงกว่า นั่นก็คือ : void.

📌 กรณีศึกษาหลัก: Void ใน Return Types

กรณีใช้งานที่เป็นมาตรฐานและสำคัญที่สุดคือการระบุชนิดข้อมูลสำหรับ Value ที่ Function นั้นๆ ไม่มีหน้าที่ในการ calculate และจะต้องจบลงเพียงแต่กระทำการ Side Effect เท่านั้น เช่น การบันทึก Log, การแก้ไข DOM โดยตรง, หรือการเรียก API เพื่อดำเนินการบางสิ่ง

  • ตัวอย่างที่ไม่ถูกต้อง (Implicit): หากคุณไม่ได้ใส่ `: any` ไว้ TypeScript จะอนุมานให้ค่ากลับของฟังก์ชันมีอยู่เสมอ
  • วิธีใช้ที่ถูกต้อง (Explicit Declaration): เมื่อต้องการเน้นความมั่นใจทางระบบว่าเป็นคำสั่งที่ไม่มีผลลัพธ์เชิงมูลค่า ให้ประกาศดังนี้:
  • function logMessage(message: string): void { // ประกาศชัดเจนว่าจะคืนค่าอะไรเลย console.log(`[LOG] ${message}`); } 
    eilogMessage(