TypeScript คืออะไร? คู่มือภาษาเข้าใจง่ายสำหรับผู้ที่ไม่ใช่นักพัฒนา

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

ทำไมเรื่องนี้สำคัญเมื่อสร้างด้วย AI

โมเดล AI เขียนโค้ดได้รวดเร็ว และโค้ดที่เร็วก็มีข้อผิดพลาด เช่น ฟิลด์ชื่อ customerName ในไฟล์หนึ่งและ customer_name ในอีกไฟล์ ราคาที่ส่งเป็นข้อความแทนตัวเลข หรือฟังก์ชันที่ถูกเรียกโดยไม่มีค่า ใน JavaScript ธรรมดา ข้อผิดพลาดหลายอย่างจะปรากฏก็ต่อเมื่อมีคนกดปุ่มผิด

TypeScript จับได้หลายอย่างเร็วขึ้น ตั้งแต่ตอนที่กำลังเขียนโค้ด:

• AI ได้รับผลตอบกลับทันที ข้อผิดพลาดของชนิดข้อมูลชี้ไปที่บรรทัดที่ผิดพอดี ทำให้ agent แก้ก่อนที่คุณจะเห็น
• การเปลี่ยนแปลงปลอดภัยขึ้น เปลี่ยนชื่อฟิลด์ TypeScript จะแจ้งทุกจุดที่ยังใช้ชื่อเดิม
• โค้ดอธิบายตัวเองได้ ชนิดข้อมูลบันทึกว่าฟังก์ชันรับอะไรและคืนอะไร ช่วยคุณ AI และนักพัฒนาคนใดก็ตามที่มาทำงานต่อในภายหลัง
• เอดิเตอร์ฉลาดขึ้น การเติมคำอัตโนมัติและ "ไปยังนิยาม" ทำงานได้ดีกว่า เพราะเอดิเตอร์รู้ว่าแต่ละค่าเป็นอะไร

นี่คือเหตุผลสำคัญที่ AI app builder หลายตัวใช้ TypeScript เป็นค่าเริ่มต้น

ตัวอย่างเปรียบเทียบในชีวิตประจำวัน

ลองนึกถึงคลังสินค้าที่มีช่องติดป้ายกำกับ แต่ละช่องมีป้าย เช่น "พาเลทเท่านั้น" "แช่เย็น" "ไม่เกิน 500 กก." เมื่อสินค้ามาถึง พนักงานตรวจที่ประตูจะเทียบสินค้ากับป้าย ปลาแช่แข็งที่จะไปช่องของแห้งจะถูกหยุดที่ ประตู ไม่ใช่ไปถูกค้นพบหนึ่งสัปดาห์ให้หลังตอนมีกลิ่น

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

TypeScript ทำงานอย่างไร

1. คุณ (หรือ AI) เขียนไฟล์ .ts หรือ .tsx เป็น TypeScript พร้อมป้ายชนิดข้อมูล
2. ตัวตรวจชนิดข้อมูลอ่านโค้ด และรายงานความไม่ตรงกันเป็นข้อผิดพลาดในเอดิเตอร์หรือตอน build
3. ขั้นตอน build ตัดชนิดข้อมูลออก ได้ JavaScript ธรรมดา
4. JavaScript รัน ในเบราว์เซอร์หรือบนเซิร์ฟเวอร์ (Node.js, Deno, Bun)

ผลที่ตามมาสำคัญ: TypeScript ตรวจโค้ดที่คุณเขียน ไม่ได้ตรวจข้อมูลที่เข้ามาขณะแอปทำงาน หาก API ภายนอกส่งอะไรที่ไม่คาดคิดกลับมา TypeScript มองไม่เห็นเว้นแต่คุณจะเพิ่มการตรวจสอบข้อมูลขณะรันด้วย

ตัวอย่างจริง: แบบฟอร์มจองคิว

สมมติคุณกำลังสร้างแอปจองคิวให้ร้านทำผม นี่คือชนิดข้อมูลที่อธิบายการจองหนึ่งรายการ:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // เครื่องหมาย ? หมายถึงไม่บังคับ
};

และฟังก์ชันที่คำนวณเงินมัดจำ:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

ลองดูว่า TypeScript จับอะไรได้

ชื่อฟิลด์สะกดผิด

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript จะรายงานว่า prise ไม่ใช่คุณสมบัติที่รู้จัก และขาด price ใน JavaScript ธรรมดา โค้ดนี้จะคำนวณเงินมัดจำออกมาเป็น NaN (ไม่ใช่ตัวเลข) อย่างเงียบๆ

ชนิดของค่าผิด

const booking: Booking = { ...otherFields, price: "40" };

TypeScript จะรายงานว่าสตริงใช้แทนตัวเลขไม่ได้ ถ้าไม่มีการตรวจนี้ "40" * 0.2 ก็ให้ผลถูกโดยบังเอิญ แต่ "40" + 5 ได้ "405" ซึ่งเป็นบั๊กประเภทที่ไปโผล่ในใบแจ้งหนี้

บริการที่ไม่มีอยู่จริง

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript จะรายงานว่า "perm" ไม่ใช่หนึ่งในบริการที่อนุญาต เมื่อร้านเพิ่มบริการดัดผมในภายหลัง คุณเพิ่มเข้าไปในชนิดข้อมูล และ TypeScript จะแสดงทุกจุดที่ต้องอัปเดต ทั้งรายการราคา แบบฟอร์ม และสีของปฏิทิน

สิ่งที่มันจับไม่ได้ หากแบบฟอร์มจองส่ง price: "40" จากเบราว์เซอร์ไปยังเซิร์ฟเวอร์ TypeScript บนเซิร์ฟเวอร์จะไม่เห็นตอนรัน นี่คือเหตุผลที่แอปที่สร้างดีมักตรวจสอบข้อมูลขาเข้าด้วย เช่น ไลบรารีตรวจสอบที่ตรวจรูปร่างของข้อมูลและแปลงเป็น Booking ที่ถูกต้อง

TypeScript กับ JavaScript

คำศัพท์ที่ควรรู้

ข้อผิดพลาดที่พบบ่อยและความเข้าใจผิด

• "TypeScript ทำให้โค้ดไม่มีบั๊ก" มันจับความไม่ตรงกันของโครงสร้างข้อมูล ไม่ได้จับตรรกะที่ผิด ค่าธรรมเนียม 2% แทน 20% ก็ผ่านการตรวจชนิดข้อมูลได้
• "ชนิดข้อมูลปกป้องฉันจากข้อมูลที่ไม่ดี" ชนิดข้อมูลหายไปตอนรัน ต้องตรวจข้อมูลจากผู้ใช้ ฟอร์ม และ API
• ใช้ any ทุกที่ เมื่อ AI ติดขัด มันอาจหันไปใช้ any หรือ // @ts-ignore เพื่อปิดข้อผิดพลาด ซึ่งซ่อนปัญหาแทนที่จะแก้
• เพิกเฉยข้อผิดพลาดชนิดข้อมูลเพราะ Preview ทำงานได้ เครื่องมือบางตัวยังรันโค้ดที่มีข้อผิดพลาดชนิดข้อมูล ข้อผิดพลาดเหล่านั้นยังเป็นบั๊กที่รอให้เกิดขึ้น
• "TypeScript ช้ากว่า" ชนิดข้อมูลถูกตัดออกก่อนรัน JavaScript ที่ทำงานจริงแทบเหมือนกัน
• "ใช้เฉพาะทีมใหญ่" นักสร้างคนเดียวก็ได้ประโยชน์ โดยเฉพาะเมื่อ AI เป็นคนทำการแก้ไขส่วนใหญ่

สิ่งที่ควรขอจาก AI builder

• "ใช้ TypeScript โดยเปิดโหมด strict"
• "กำหนดชนิดข้อมูลร่วมสำหรับรายการหลักของเรา เช่น Customer, Booking, Invoice และใช้ทั้งฝั่งหน้าบ้านและหลังบ้าน"
• "อย่าใช้ any หรือ @ts-ignore เพื่อผ่านข้อผิดพลาด ให้แก้สาเหตุจริงและบอกฉันว่าคืออะไร"
• "ตรวจข้อมูลขาเข้าทั้งหมดที่เซิร์ฟเวอร์ ไม่ใช่แค่ใช้ชนิดข้อมูล"
• "รันตัวตรวจชนิดข้อมูลและแก้ข้อผิดพลาดทั้งหมดก่อนบอกฉันว่าเสร็จแล้ว"
• "เมื่อเปลี่ยนชื่อฟิลด์ ให้อัปเดตทุกจุดที่ TypeScript แจ้ง"
• "อธิบายข้อผิดพลาดชนิดข้อมูลนี้เป็นภาษาอังกฤษธรรมดา"

หากต้องการดูวิธีตรวจสิ่งที่ AI สร้าง ดู วิธีตรวจโค้ดที่ AI สร้าง และ วิธีดีบักแอปที่สร้างด้วย AI

TypeScript ใน Mythex

เมื่อคุณไม่ได้ขอสิ่งใดเป็นพิเศษ Mythex จะเริ่มโปรเจกต์ใหม่บน Vite + React + TypeScript + Tailwind เอดิเตอร์โค้ดมีความสามารถด้านภาษา เช่น การเติมคำอัตโนมัติ การวินิจฉัย และไปยังนิยามสำหรับ TypeScript และ JavaScript ร่วมกับภาษาอื่น ทำให้เห็นข้อผิดพลาดชนิดข้อมูลในโค้ด ไม่ใช่แค่ในหน้า Preview เอดิเตอร์อ่านได้อย่างเดียวบน Free และแก้ไขได้เต็มที่บน Pro คุณยังขอการตั้งค่าอื่นในพรอมต์แรกได้ เอกสาร การเลือกเทคโนโลยี อธิบายวิธีการ และ เอกสารเอดิเตอร์โค้ด อธิบายสิ่งที่เอดิเตอร์แสดง

คำถาม