PlusMagi's Blog By Pitt Phunsanit Frontend TypeScript ขั้นสูง: เจาะลึกการ Extend คุณสมบัติเพื่อสร้าง Custom Types และโครงสร้างข้อมูลใหม่

TypeScript ขั้นสูง: เจาะลึกการ Extend คุณสมบัติเพื่อสร้าง Custom Types และโครงสร้างข้อมูลใหม่

บทนำสู่พลังของ TypeScript ขั้นสูง

TypeScript ไม่ได้เป็นเพียงแค่ JavaScript ที่มีการเพิ่มระบบ Type Checking เข้ามาเท่านั้น แต่ยังขยายความสามารถในการสร้างโครงสร้างข้อมูลที่ซับซ้อนและแม่นยำยิ่งกว่าการกำหนดชนิดพื้นฐานทั่วไป การทำความเข้าใจในฟีเจอร์ขั้นสูงอย่าง Generics หรือ Utility Types จึงมีความสำคัญอย่างยิ่งสำหรับนักพัฒนามืออาชีพ เพราะมันช่วยให้เราควบคุมรูปร่าง (Shape) ของ Object ได้ตามต้องการ สร้าง Custom Data Structures และรับประกันว่าโค้ดของเราจะปลอดภัยตั้งแต่ขั้นตอน Compile Time

Generics: ความยืดหยุ่นกับความเป็นประเภทเฉพาะทาง

เมื่อคุณเผชิญหน้ากับการเขียน Component, Function, หรือ Class ทั่วไปที่ต้องทำงานร่วมกันโดยไม่รู้ถึง ‘ขนาด’ หรือ ‘รูปแบบ’ ข้อมูลล่วงหน้า คุณสมบัติ Generic คือคำตอบที่ดีที่สุด แทนที่จะใช้ `any` ซึ่งเป็นการปิดกั้นประโยชน์ของการตรวจสอบแบบ Static Typing เราควรระบุตัวแปร Placeholder เช่น `` เพื่อให้ Compiler รู้จักข้อจำกัดหรือเงื่อนไขบางประการ ทำให้เกิด Code Reusability สูงมาก ตัวอย่างเช่น หากเรากำลังออกแบบ Repository Pattern สำหรับ CRUD Operations ฟังก์ชันดังกล่าวจะต้องรองรับ Entity ชนิดใดก็ได้ โดยที่เราไม่ต้องประกาศ Type นั้นๆ ซ้ำหลายครั้ง function getById<T>(id: number): T | undefined { /* ... */ } ตรงนี้ T ทำหน้าที่เป็นพิมพ์เขียวของข้อมูล ไม่ใช่ค่าจริง นี่คือแกนหลักในการสร้าง Library ที่มีความทั่วไปแต่ยังคงความแม่นยำสูงในทุกบริบทใช้งาน

ขยายโครงสร้างด้วย Utility และ Mapped Types

หาก Generics ให้เรื่อง