จากศูนย์สู่ฮีโร่ใน TypeScript

TypeScript ช่วยให้โค้ด JavaScript ของคุณปลอดภัยขึ้นและจัดการได้ง่ายขึ้น อีกทั้งยังช่วยให้คุณตรวจพบข้อผิดพลาดได้ตั้งแต่เนิ่นๆ

TypeScript เพิ่ม static typing ให้กับ JavaScript และจะถูกแปลงเป็น JavaScript ปกติเมื่อคุณรันโปรแกรม

ประเภทข้อมูลพื้นฐานที่พบบ่อย:

  • number: สำหรับตัวเลขทั้งหมด
  • boolean: ค่า true หรือ false
  • string: สำหรับข้อความ
  • symbol: สำหรับ ID ที่ไม่ซ้ำกัน
  • bigint: สำหรับตัวเลขที่มีค่าขนาดใหญ่มาก

การระบุประเภท (Type Annotations): let name: string = "Alice"; let age: number = 30;

อาร์เรย์และออบเจกต์ (Arrays and Objects): let fruits: string[] = ["apple", "banana"]; let user: { name: string; age: number } = { name: "Bob", age: 25 };

ฟังก์ชัน (Functions): function greet(name: string): string { return "Hello, " + name; }

ใช้ void หากฟังก์ชันไม่มีการคืนค่า: function logMessage(): void { console.log("Message sent"); }

เครื่องมือขั้นสูง (Advanced Tools):

  • Type Aliases: สร้างประเภทข้อมูลของคุณเอง
  • Interfaces: กำหนดโครงสร้าง (shape) ของออบเจกต์
  • Enums: ใช้ชุดของค่าคงที่ที่มีชื่อเรียก
  • Tuples: อาร์เรย์ที่มีความยาวคงที่และระบุประเภทข้อมูลเฉพาะเจาะจง
  • Generics: สร้างโค้ดที่นำกลับมาใช้ใหม่ได้และรองรับหลายประเภทข้อมูล
  • Utility Types: ใช้ Partial, Pick หรือ Record เพื่อปรับเปลี่ยนประเภทข้อมูล

แนวทางปฏิบัติที่ดีที่สุด (Best practices) สำหรับเวิร์กโฟลว์ของคุณ:

  • ใช้ type สำหรับการทำ alias แบบง่ายๆ และข้อมูลประเภทพื้นฐาน (primitives)
  • ใช้ interface สำหรับโครงสร้างของออบเจกต์
  • หลีกเลี่ยงการใช้ any เพราะจะทำให้ความปลอดภัยของโค้ดเสียไป
  • ใช้ unknown หากคุณยังไม่ทราบประเภทข้อมูลที่แน่นอน
  • ปล่อยให้คอมไพเลอร์คาดเดาประเภทข้อมูลเองเมื่อมีความชัดเจนอยู่แล้ว
  • เพิ่มการระบุประเภท (annotations) ใน API ของคุณเพื่อความชัดเจน

การเชี่ยวชาญเครื่องมือเหล่านี้จะช่วยให้คุณสร้างแอปพลิเคชันขนาดใหญ่ที่มีความเสถียรได้

ที่มา: https://dev.to/miasalazar/from-zero-to-hero-in-typescript-425j