TypeScript คืออะไร

TypeScript สร้างโดย Microsoft (Anders Hejlsberg คนเดียวกับที่สร้าง C#) เปิดตัวปี 2012 สั้น ๆ คือ JavaScript + ระบบ type ที่ตรวจตอน compile

ปัญหาที่ TypeScript แก้

JavaScript ไม่ตรวจ type — พิมพ์ผิดชื่อ property, ส่ง argument ผิดชนิด, เรียก method ที่ไม่มี — ทั้งหมดรู้ตอน runtime (บางทีบน production ของลูกค้า)

// JavaScript — ไม่มีใครเตือน
function getFullName(user) {
  return user.firstname + " " + user.lastName;  // firstName พิมพ์ผิดเป็น firstname
}

getFullName({ firstName: "สมชาย", lastName: "ใจดี" });
// "undefined ใจดี"  — บั๊กเงียบ ๆ

// TypeScript — error ทันทีตอนเขียน
interface User {
  firstName: string;
  lastName: string;
}

function getFullName(user: User): string {
  return user.firstname + " " + user.lastName;
  //          ~~~~~~~~~ Property 'firstname' does not exist on type 'User'. Did you mean 'firstName'?
}

editor ขีดเส้นแดงทันที — บั๊กถูกจับก่อนโค้ดจะรันด้วยซ้ำ

superset ของ JavaScript

ทุกไฟล์ JavaScript ที่ถูกต้อง คือไฟล์ TypeScript ที่ถูกต้อง (แค่เปลี่ยนนามสกุลเป็น .ts) TypeScript เพิ่ม syntax ใหม่ทับ JS:

• type annotation: let age: number = 25
• interface / type alias
• generics: Array<string>
• enum
• as type assertion

JavaScript ทั้งหมด  ⊂  TypeScript

compile แล้ว type หายไป

TypeScript ไม่รันเอง — tsc (คอมไพเลอร์) แปลงเป็น JavaScript ธรรมดา โดยลบ type ออกทั้งหมด:

// input.ts
function greet(name: string): string {
  return `สวัสดี ${name}`;
}

// output.js — type หายหมด
function greet(name) {
  return `สวัสดี ${name}`;
}

ผลที่ตามมา:

• type check เกิดตอน compile เท่านั้น — ตอน runtime ไม่มีการตรวจ type (นี่คือเหตุที่ต้อง validate ข้อมูลจากภายนอกด้วย zod ฯลฯ — บทที่ 30)
• โค้ดที่รันจริงคือ JS ปกติ — เร็วเท่ากัน, ไม่มี overhead
• รันบน browser / Node / Deno / Bun ได้เหมือน JS

ทำไมทุกโปรเจกต์ใช้

• จับบั๊กก่อน runtime — typo, argument ผิด, null/undefined ที่ลืมเช็ค
• autocomplete ที่แม่นยำ — editor รู้ว่า object มี property อะไร, function รับอะไร
• refactor ปลอดภัย — rename property → ทุกที่ที่ใช้ถูกอัปเดต / error
• เอกสารในตัว — type signature บอกว่า function ทำอะไร รับ/คืนอะไร
• โปรเจกต์ใหญ่ทีมหลายคน — สัญญาระหว่าง module ชัดเจน

React, Vue, Angular, Next.js, Node ecosystem — เกือบทุก template เริ่มต้นเป็น TypeScript แล้ว library ยอดนิยมมี type ให้ (หรือมี @types/ package)

TypeScript ไม่ได้ทำให้ JS ช้าลงหรือเปลี่ยนพฤติกรรม

• runtime = JS เป๊ะ ๆ (type ถูกลบทิ้ง)
• ไม่ต้องเรียนใหม่หมด — เขียน JS ที่คุณรู้อยู่แล้ว + เติม type
• เริ่มแบบ “หลวม” ได้ (any เยอะ ๆ) แล้วค่อยเข้มขึ้น

trade-off ที่ต้องรับ

• มี build step — ต้อง compile (tsc) หรือใช้ tool ที่ strip type ให้ (tsx, esbuild, Vite)
• type ที่ซับซ้อนอ่านยาก — generic + conditional type + mapped type ลึก ๆ
• type ≠ runtime guarantee — as User ไม่ได้ตรวจว่าข้อมูลเป็น User จริง ๆ ตอนรัน
• ต้องรอ type ของ library ตามมา (สมัยนี้แทบไม่เป็นปัญหา)

ตัวอย่างที่ type ช่วยจริง

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function request(url: string, method: HttpMethod) { /* ... */ }

request("/api/users", "GET");     // OK
request("/api/users", "PATCH");   // Error: "PATCH" ไม่อยู่ใน HttpMethod
request("/api/users", "get");     // Error: ต้องตัวใหญ่

const user = { name: "อร", age: 25 };
user.age.toUpperCase();
//       ~~~~~~~~~~~ Property 'toUpperCase' does not exist on type 'number'

เรื่องที่คนมักพลาด

• คิดว่า TypeScript รันเองได้ — ต้อง compile เป็น JS ก่อน (หรือใช้ tsx/loader ที่ strip type)
• คิดว่า type ป้องกัน runtime error ทุกอย่าง — ป้องกันเฉพาะที่ตรวจได้ตอน compile; ข้อมูลจาก API/form/localStorage ยังต้อง validate
• ใส่ type annotation ทุกที่ — TS infer ได้เยอะ; const x = 5 ไม่ต้องเขียน : number
• ใช้ any เพื่อ “ให้ผ่าน ๆ” — เท่ากับปิด type check; ใช้ unknown แล้ว narrow (บทที่ 25)
• คิดว่าต้องเขียนใหม่หมด — เปลี่ยน .js → .ts แล้วค่อย ๆ เติม type ได้

สรุป

• TypeScript = JavaScript + ระบบ type ที่ตรวจตอน compile (ไม่ใช่ runtime)
• superset ของ JS — ทุก JS ที่ถูกต้องเป็น TS ที่ถูกต้อง
• tsc แปลงเป็น JS ธรรมดาโดยลบ type ทิ้ง — runtime = JS เป๊ะ ไม่มี overhead
• ประโยชน์: จับบั๊กก่อน runtime, autocomplete แม่น, refactor ปลอดภัย, เอกสารในตัว
• trade-off: มี build step, type ซับซ้อนอ่านยาก, type ≠ runtime guarantee

บทถัดไปเราจะติดตั้ง TypeScript, ตั้ง tsconfig.json, รันโค้ดด้วย tsx และตั้ง editor ให้ตรวจ type