TypeScript

มันคืออะไร

ลองนึกถึงโปรแกรมตรวจตัวสะกดที่ขีดเส้นใต้คำที่พิมพ์ผิดขณะที่คุณพิมพ์ ก่อนที่คุณจะกดส่งด้วยซ้ำ TypeScript ทำแบบเดียวกันนี้กับโค้ดของคุณ มันคือ JavaScript ที่มีระบบชนิดข้อมูลแบบสถิต (static type system) วางซ้อนอยู่ด้านบน — ชุดกฎเกณฑ์ที่ตรวจสอบโค้ดของคุณขณะที่คุณเขียน และแจ้งเตือนข้อผิดพลาดตั้งแต่เนิ่นๆ มันจะถูกคอมไพล์ลงมาเป็น JavaScript ธรรมดา ดังนั้นมันจึงรันได้ทุกที่ที่ JS รันได้ — เบราว์เซอร์, Node, Deno, Bun, runtimes — พร้อมทั้งดักจับบั๊กทั้งกลุ่มได้ก่อนที่โค้ดของคุณจะถูกรันจริงด้วยซ้ำ

จุดแข็ง

ชนิดข้อมูลแบบสถิตช่วยดักจับการพิมพ์ผิด ข้อผิดพลาดเกี่ยวกับ null และความไม่ตรงกันของโครงสร้างข้อมูล ตั้งแต่ตอนคอมไพล์
ประสบการณ์การใช้งานในเอดิเตอร์ที่ยอดเยี่ยม: การเติมโค้ดอัตโนมัติ (autocomplete), เอกสารประกอบแบบอินไลน์, การรีแฟกเตอร์ที่ปลอดภัย
นำมาใช้แบบค่อยเป็นค่อยไปได้ — คุณจะใส่ชนิดข้อมูลมากหรือน้อยแค่ไหนก็ได้ตามต้องการ
ใช้ภาษาเดียวกันทั้งฝั่งหน้าบ้าน () และหลังบ้าน () พร้อมระบบนิเวศ npm (Node Manager) ขนาดใหญ่มหาศาล

ข้อแลกเปลี่ยน

ต้องมีขั้นตอนการ build/compile และตั้งค่า tsconfig.json
ระบบชนิดข้อมูลมีความสามารถสูงจนซับซ้อนได้จริง (generics, conditional types) และอาจกลายเป็นตัวกินเวลา
การตรวจสอบชนิดข้อมูลจะเกิดขึ้นเฉพาะตอนที่คุณเขียนและ build โค้ดเท่านั้น เมื่อโปรแกรมรันจริงแล้ว การตรวจสอบเหล่านั้นจะหายไป ดังนั้นคุณยังคงต้องมีการตรวจสอบข้อมูลตอนรันจริง (runtime validation คือการตรวจสอบครั้งที่สองที่ดูข้อมูลจริงขณะโปรแกรมกำลังทำงาน เช่น Zod) สำหรับข้อมูลนำเข้าที่ไม่น่าเชื่อถือ
มีความยุ่งยากในการตั้งค่าและเครื่องมือที่เปลี่ยนแปลงไปมาระหว่าง bundler และ runtime ต่างๆ

ควรใช้เมื่อไร

หยิบ TypeScript มาใช้กับโปรเจกต์ JavaScript ที่ไม่ธรรมดาทุกโปรเจกต์ โดยเฉพาะเมื่อมีผู้ร่วมพัฒนาหลายคนหรือมีอายุการใช้งานยาวนาน มันคือตัวเลือกมาตรฐานสำหรับเว็บแอปสมัยใหม่ (React, Next.js, SvelteKit), แบ็กเอนด์ฝั่ง Node/edge และงานใดๆ ก็ตามที่ความปลอดภัยในการรีแฟกเตอร์มีความสำคัญ

เข้ากับ vibe coding แค่ไหน

ผู้ช่วย AI ทำงานได้ดีเป็นพิเศษกับ TypeScript เพราะตัวตรวจสอบชนิดข้อมูล (type checker) มอบวงจรป้อนกลับที่รวดเร็วให้ทั้งกับตัวมันเองและตัวคุณ — แปะข้อผิดพลาดจากการคอมไพล์กลับไปให้ แล้วโมเดลมักจะแก้ไขได้อย่างเรียบร้อย สั่งการ AI โดยขอให้ใช้ชนิดข้อมูลที่เจาะจงแทนการใช้ any และขอให้มีการตรวจสอบข้อมูลตอนรันจริงตรงจุดที่รับข้อมูลจากภายนอก ( (Application Programming Interface) inputs, ตัวแปรสภาพแวดล้อม (env vars)) บอกเวอร์ชันของ runtime และเฟรมเวิร์กที่คุณใช้ให้ชัดเจน เพื่อให้ import และการตั้งค่าที่ถูกสร้างขึ้นตรงกัน เมื่อชนิดข้อมูลเริ่มซับซ้อนยุ่งเหยิง ให้ขอให้โมเดลอธิบายชนิดข้อมูลที่มันอนุมานมา แทนที่จะขยายมันให้กว้างขึ้นโดยไม่คิด

type User = { id: number; name: string; email?: string };

function greet(user: User): string {
  return `Hi ${user.name}` + (user.email ? ` <${user.email}>` : "");
}

console.log(greet({ id: 1, name: "Ada" }));