วิธีที่ผมขาย TypeScript (Sales Pitch)

• TypeScript คือภาษาที่เพิ่มข้อมูล type ให้กับ JavaScript
  • ข้อมูล type จะถูกลบออกก่อนถูกรันโดย JS engine → กล่าวคือ จำเป็นต้องมีขั้นตอนเพิ่มเติมในกระบวนการเขียนและ deploy
  • ขั้นตอนเพิ่มเติมนั้นคุ้มค่าหรือไม่? → คุ้มค่ามากพอ

การเติมโค้ดอัตโนมัติและการตรวจจับข้อผิดพลาดระหว่างแก้ไขโค้ด

• TypeScript ให้ทั้งการเติมโค้ดอัตโนมัติและการตรวจจับข้อผิดพลาดระหว่างเขียนโค้ด
• ตัวอย่าง 1: การพิมพ์ผิด, type ไม่ถูกต้อง, อาร์กิวเมนต์ขาดหาย
  • จะแสดงข้อผิดพลาดเมื่อเข้าถึงพร็อพเพอร์ตี้ที่ไม่มีอยู่ และจะไม่ปรากฏในรายการเติมโค้ดอัตโนมัติ
  • จะแสดงข้อผิดพลาดเมื่อเรียกใช้เมธอดกับ type ที่ไม่ถูกต้อง
  • จะแสดงข้อผิดพลาดเมื่อไม่มีอาร์กิวเมนต์ที่จำเป็น
  • จะแสดงข้อผิดพลาดเมื่อส่งอาร์กิวเมนต์ที่มี type ไม่ถูกต้อง
• ตัวอย่าง 2: ข้อผิดพลาดของค่าที่ฟังก์ชันคืนกลับ
  • หากค่าที่คืนกลับไม่ตรงกับ type ที่กำหนดไว้ จะแสดงข้อผิดพลาด
  • ตัวอย่างเช่น เมื่อค่าที่คืนกลับเป็น string[] แต่กำหนด return type เป็น string จะเกิดข้อผิดพลาด
• ตัวอย่าง 3: ข้อผิดพลาดในการจัดการพร็อพเพอร์ตี้แบบเลือกได้
  • หากใช้พร็อพเพอร์ตี้แบบเลือกได้เป็นค่าที่คืนกลับ แล้ว type ไม่ตรงกัน จะแสดงข้อผิดพลาด
• ตัวอย่าง 4: กรณี case ที่หายไปในคำสั่ง switch
  • หากไม่ได้จัดการทุก case ในคำสั่ง switch จะเกิดข้อผิดพลาด
  • จะเกิดข้อผิดพลาดหากละเมิดข้อกำหนดที่ว่าค่าที่เหลือต้องเป็น type never
• ตัวอย่าง 5: ข้อผิดพลาดในการจัดการบางกรณีในโค้ด
  • เมื่อมีการแตกแขนงตามค่าบางอย่าง หากจัดการกรณีไม่ถูกต้องจะเกิดข้อผิดพลาด
  • ตัวอย่างเช่น จะเกิดข้อผิดพลาดเมื่อเข้าถึงพร็อพเพอร์ตี้ที่ไม่มีอยู่ใน object type นั้น

การระบุ type ของพารามิเตอร์ฟังก์ชันและค่าที่คืนกลับ → เป็นเอกสารประกอบที่ดี

• TypeScript สามารถระบุ type ของพารามิเตอร์ฟังก์ชันและค่าที่คืนกลับได้
• ช่วยเพิ่มความเข้าใจโค้ดและการดูแลรักษา
• ทำให้เห็นชัดเจนว่าอาร์กิวเมนต์และค่าที่คืนกลับของฟังก์ชันเป็น type ใด

เสริมความแข็งแกร่งให้การรีแฟกเตอร์โค้ด

• TypeScript ช่วยให้รีแฟกเตอร์โค้ดได้ปลอดภัยยิ่งขึ้น
• เมื่อเปลี่ยนชื่อเมธอด จะสะท้อนไปยังโค้ดที่เชื่อมโยงทั้งหมดอย่างปลอดภัย
• สามารถเข้าใจความสัมพันธ์เชื่อมโยงของโค้ดได้อย่างแม่นยำ

การใช้ TypeScript ง่ายขึ้น

• การรันและคอมไพล์ TypeScript ทำได้ง่ายขึ้น
• สามารถรัน TypeScript ได้โดยตรงบนแพลตฟอร์มอย่าง Node.js, Deno และ Bun
• บันเดลเลอร์อย่าง Vite รองรับ TypeScript โดยค่าเริ่มต้น
• มีการนำเทคนิค type stripping มาใช้ → ลบเฉพาะข้อมูล type โดยไม่มีการแปลงอย่างอื่น
• การเผยแพร่แพ็กเกจ npm ดีขึ้น → รองรับการสร้างไฟล์ JavaScript และไฟล์ประกาศ type โดยอัตโนมัติ

ข้อเสียของ TypeScript

• มี learning curve → ซับซ้อนกว่า JavaScript
• อาจเกิดปัญหาได้เมื่อบางแพ็กเกจ npm ไม่มี type definition หรือมีไม่ถูกต้อง
• การตั้งค่า tsconfig.json อาจซับซ้อน
  • หากตั้งค่าให้เข้มงวดที่สุดเท่าที่เป็นไปได้ จะช่วยบรรเทาปัญหาได้
  • เมื่อการลบ type ชัดเจนขึ้น บทบาทของ tsconfig.json ก็เรียบง่ายขึ้น

คำถามพบบ่อยเกี่ยวกับ TypeScript

โค้ด TypeScript จะดูหนักเกินไปหรือไม่?

• TypeScript สามารถเขียนโค้ดได้ด้วยการระบุ type เพียงเล็กน้อยผ่านการอนุมาน type
• ใช้งานได้อย่างมีประโยชน์แม้ไม่มี type annotation ที่ซับซ้อน

TypeScript กำลังพยายามเปลี่ยน JavaScript ให้เป็น C# หรือ Java หรือไม่?

• ในช่วงแรกมีการเพิ่มคลาส โมดูล enum ฯลฯ เพื่อชดเชยความสามารถที่ JavaScript ยังขาด
• ปัจจุบันกำลังปรับปรุง TypeScript ให้สอดคล้องกับมาตรฐาน ECMAScript
• ฟีเจอร์ที่ไม่มีใน JavaScript จะไม่ถูกเพิ่มเข้ามาใน TypeScript

TypeScript รองรับเฉพาะการเขียนโปรแกรมเชิงวัตถุ (OOP) หรือไม่?

• TypeScript รองรับแพตเทิร์นการเขียนโปรแกรมเชิงฟังก์ชันได้ดีเช่นกัน
• ตัวอย่างเช่น discriminated union มักถูกใช้บ่อยในสาย functional programming

จำเป็นต้องเรียนรู้การนิยาม type ที่ซับซ้อนหรือไม่?

• การใช้งาน TypeScript ส่วนใหญ่ แค่การนิยาม type แบบง่าย ๆ ก็เพียงพอ
• การนิยาม type ที่ซับซ้อนมีประโยชน์ตอนเขียนไลบรารี แต่ไม่จำเป็นสำหรับการใช้งานทั่วไป

ต้องใช้เวลานานแค่ไหนในการเรียนรู้ TypeScript?

• แนวคิดพื้นฐานสามารถเรียนรู้ได้ภายในวันเดียว
• วันถัดไปก็สามารถเริ่มเขียนและดีบักโค้ดง่าย ๆ ได้
• จากนั้นค่อย ๆ เรียนรู้ type ที่ซับซ้อนและฟีเจอร์ขั้นสูงเพิ่มเติมได้

อ่านต่อเป็นลำดับถัดไป

• What is TypeScript?
• Tackling TypeScript (ฟรี)

[skrevolve]

มีข้อดีจากการใช้ strong typing ซึ่งก็เช่นเดียวกันใน C++

[slowandsnow]

พอเปลี่ยนจาก JavaScript เป็น TypeScript ก็เหมือนพัฒนางานแบบหลับตาอยู่แล้วลืมตาขึ้นมา ความมั่นใจจาก type, การเติมโค้ดอัตโนมัติ และการผสานกับ Copilot

[bungker]

ทีมต่าง ๆ ในบริษัทเราทำโปรเจกต์โดยบอกว่าแค่ JavaScript ก็พอ แต่ตอนนี้กำลังทยอยย้ายทั้งหมดไปเป็น TypeScript

[tsboard]

ดูเหมือนว่าปัจจัยแห่งความสำเร็จที่ทำให้ TypeScript เอาชนะ Dart ได้ คือการเป็นสิ่งที่เข้ามาเสริม JavaScript ไม่ใช่เข้ามาแทนที่ทั้งหมด ผมรู้สึกจริง ๆ ว่าคิดไม่ผิดที่ได้เรียนมันไว้