อธิบาย TypeScript: ทำไมคุณถึงต้องใช้มัน

คุณเขียน JavaScript ทุกวัน และมันก็ทำงานได้ดีอยู่แล้ว แล้วทำไมต้องเปลี่ยนมาใช้ TypeScript ล่ะ?

ผมเคยเสียเวลาถึงสองวันเพื่อแก้บั๊กบน production มันเป็นแค่การพิมพ์ชื่อ property ผิดเพียงเล็กน้อยเท่านั้น ซึ่งถ้าเป็น TypeScript มันจะตรวจพบข้อผิดพลาดนั้นได้ภายในเสี้ยววินาที

TypeScript คือ JavaScript ที่มีการระบุประเภทข้อมูล (types) Microsoft เป็นผู้สร้างขึ้นในปี 2012 และทีมพัฒนาขนาดใหญ่ที่ Google และ Slack ต่างก็ใช้งานมัน

TypeScript ไม่ได้มาแทนที่ JavaScript แต่มันจะถูกคอมไพล์ (compile) ให้กลายเป็น JavaScript ปกติ ซึ่งเบราว์เซอร์และ Node.js สามารถรันไฟล์ JS ที่ได้นั้นได้เลย TypeScript ช่วยให้คุณเขียนโค้ดได้ดีขึ้นก่อนที่จะเริ่มรันจริง

ลองเปรียบเทียบสองตัวอย่างนี้:

JavaScript:

function greetUser(name) {
  return "Hello, " + name.toUpperCase();
}
greetUser(42); // สิ่งนี้จะทำให้แอปของคุณพังในขณะ runtime

TypeScript:

function greetUser(name: string): string {
  return "Hello, " + name.toUpperCase();
}
greetUser(42); // สิ่งนี้จะแสดงข้อผิดพลาดใน editor ของคุณทันที

ทำไมต้องใช้ TypeScript?

  • ตรวจพบข้อผิดพลาดได้เร็วขึ้น: คุณจะพบจุดผิดพลาดในขณะที่กำลังพิมพ์ ไม่ใช่ตอนที่ผู้ใช้งานพบมัน
  • ระบบ autocomplete ที่ดีกว่า: Editor ของคุณจะรู้จักโครงสร้างข้อมูลและช่วยแนะนำ property ต่างๆ ให้
  • เป็นเอกสารที่มีชีวิต (Living documentation): คุณสามารถเห็นได้ทันทีว่าฟังก์ชันต้องการข้อมูลประเภทใดจากการดู signature ของมัน
  • การ refactoring ที่ปลอดภัย: หากคุณเปลี่ยนชื่อ property ตัว TypeScript จะแจ้งเตือนทุกจุดในโค้ดที่ได้รับผลกระทบ

วิธีเริ่มต้น:

  1. ติดตั้งผ่าน npm: npm install -g typescript

  2. สร้างไฟล์ชื่อ hello.ts: const message: string = "Hello, TypeScript!"; console.log(message);

  3. คอมไพล์ไฟล์: tsc hello.ts

สิ่งนี้จะสร้างไฟล์ hello.js ขึ้นมา โดยประเภทข้อมูล (types) จะหายไปในไฟล์ผลลัพธ์ เหลือเพียง JavaScript ที่สะอาดพร้อมให้เบราว์เซอร์นำไปรัน

ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง:

  • การใช้ "any" กับทุกอย่าง: วิธีนี้จะทำให้คุณเสียประโยชน์จาก TypeScript ควรระบุประเภทข้อมูลให้ชัดเจน
  • การเพิกเฉยต่อข้อผิดพลาด: อย่าซ่อนข้อผิดพลาดด้วยการเขียนคอมเมนต์ แต่ควรแก้ไขปัญหาที่ต้นเหตุ
  • การระบุประเภทข้อมูลมากเกินไป (Over-annotating): TypeScript นั้นฉลาด มันสามารถคาดเดาประเภทข้อมูลผ่านการอนุมาน (inference) ได้บ่อยครั้ง

TypeScript มีช่วงเวลาในการเรียนรู้ (learning curve) เล็กน้อย แต่มันจะคุ้มค่าเมื่อโปรเจกต์ของคุณเติบโตขึ้น

ที่มา: https://dev.to/ramesh_s_a8f0867d239e927c/typescript-explained-why-every-javascript-developer-should-care-4nn3