บทที่ 5: JavaScript & TypeScript

“บ้านที่มีแค่ผนังกับหลังคา ก็แค่ที่พักพิง บ้านที่มีไฟฟ้า คือบ้านที่มีชีวิต”

The Blueprint (พิมพ์เขียว)

HTML คือโครงสร้าง CSS คือการตกแต่ง แต่ทั้งสองอย่างยัง “นิ่ง”

เว็บไซต์ที่ดีต้อง “ตอบสนอง”:

คลิกปุ่ม → บางอย่างเกิดขึ้น
พิมพ์ในช่อง → ข้อความปรากฏ
เลื่อนหน้า → Animation เล่น

JavaScript = ระบบไฟฟ้า ที่ทำให้บ้านมีชีวิต

The Construction Site (หน้างานก่อสร้าง)

⚡ JavaScript — ระบบไฟฟ้าของบ้าน

// เมื่อกดสวิตช์ → ไฟเปิด
document.querySelector('#switch').addEventListener('click', () => {
  document.querySelector('#light').classList.toggle('on');
});

// เมื่อพิมพ์ → แสดงผล
const input = document.querySelector('#search');
input.addEventListener('input', (e) => {
  console.log('คุณกำลังค้นหา:', e.target.value);
});

🎯 JavaScript สิ่งที่ทำได้

Action	ในบ้าน	ในเว็บ
Click	กดสวิตช์	กดปุ่ม
Input	หมุนวอลุ่ม	พิมพ์ข้อความ
Scroll	เดินในบ้าน	เลื่อนหน้า
Timer	นาฬิกาปลุก	Countdown
Network	สั่งของออนไลน์	ดึงข้อมูล API

🔷 TypeScript — มาตรฐานความปลอดภัยระบบไฟ

// JavaScript - ไม่มี Type
function greet(name) {
  return "Hello " + name;
}
greet(123); // ทำงานได้ แต่ผิดหลัก

// TypeScript - มี Type
function greet(name: string): string {
  return "Hello " + name;
}
greet(123); // ❌ Error! ต้องเป็น string

TypeScript = Blueprint ระบบไฟ ที่ระบุว่าสายไหนต่อกับอะไร ห้ามต่อผิดประเภท

📊 JavaScript vs TypeScript

Feature	JavaScript	TypeScript
Type Safety	❌	✅
IDE Support	ปานกลาง	ดีมาก
Bug Prevention	น้อย	มาก
Build Step	ไม่จำเป็น	จำเป็น

Material Selection (เลือกสเปกวัสดุ)

🛠️ Modern JavaScript (ES6+)

// Arrow Functions
const add = (a, b) => a + b;

// Destructuring
const { name, age } = user;

// Template Literals
const message = `Hello ${name}, you are ${age}`;

// Async/Await
const fetchUser = async () => {
  const response = await fetch('/api/user');
  const data = await response.json();
  return data;
};

// Spread Operator
const newArray = [...oldArray, newItem];

📝 TypeScript Basics

// Type Annotations
let name: string = "สมชาย";
let age: number = 25;
let isActive: boolean = true;

// Interface
interface User {
  id: number;
  name: string;
  email: string;
  avatar?: string; // optional
}

// Function Types
function processUser(user: User): void {
  console.log(user.name);
}

Architect’s Note (บันทึกสถาปนิก)

⚠️ ข้อควรระวัง

ใช้ TypeScript ในโปรเจกต์จริง — Bug ลดลงมากกว่า 40%
หลีกเลี่ยง any — ถ้าใช้ any ไปทำไมต้อง TypeScript
อย่าใช้ var — ใช้ const และ let แทน

💡 Best Practices

Enable Strict Mode ใน TypeScript
ใช้ ESLint + Prettier สำหรับ Code Style
เขียน Type Definitions สำหรับ API Responses