กลับไปหน้าหลัก

บทที่ 17: TypeScript & Interface ใน Next.js

TypeScript
Interface
Type Safety
IntelliSense

💡 TypeScript พื้นฐาน

TypeScript เป็น superset ของ JavaScript ที่เพิ่ม type system เข้าไป ช่วยให้เขียนโค้ดที่ปลอดภัยและมีคุณภาพมากขึ้น

🎯 ประเภทข้อมูลพื้นฐาน
📝 Primitive Types
// String
let name: string = 'สมชาย';

// Number  
let age: number = 25;
let price: number = 99.99;

// Boolean
let isActive: boolean = true;

// Array
let skills: string[] = ['React', 'TypeScript'];
let numbers: number[] = [1, 2, 3, 4, 5];

// Null & Undefined
let data: null = null;
let value: undefined = undefined;
🔀 Union & Literal Types
// Union Types (หรือ)
let id: string | number = 'user-123';
id = 456; // ได้ทั้งสอง

// Literal Types (ค่าที่แน่นอน)
let status: 'pending' | 'approved' | 'rejected';
status = 'pending'; // ได้
// status = 'invalid'; // Error!

// Optional Properties
let user: {
  name: string;
  age?: number; // optional
} = {
  name: 'สมชาย'
  // age ไม่ใส่ก็ได้
};