Types Definition (การกำหนดประเภท)

// สร้างประเภท User ก่อน
type User = {
  id: number;
  name: string;
  email: string;
};

// กำหนดค่าให้ตัวแปร user ที่มีประเภทเป็น User
const user: User = {
  id: 1,
  name: "John",
  email: "[email protected]",
};

Type Aliases (ประเภทนาม)

การสร้างชื่อใหม่ให้กับประเภทข้อมูลที่มีอยู่แล้ว ช่วยให้โค้ดอ่านง่ายและนำกลับมาใช้ซ้ำได้

// กำหนดให้ UserID เป็นประเภท number
type UserID = number;
// กำหนดให้ UserRole เป็นประเภท union ของค่าที่เป็นไปได้
type UserRole = "admin" | "user" | "guest";

// กำหนดโครงสร้างของ User
type User = {
  id: UserID;      // ใช้ประเภทที่กำหนดไว้ก่อนหน้า
  name: string;    // ชื่อผู้ใช้เป็น string
  role: UserRole;  // บทบาทต้องเป็นหนึ่งในค่าที่กำหนดไว้
};

Type Inference (การสังเกตประเภท)

TypeScript สามารถคาดเดาประเภทข้อมูลได้โดยอัตโนมัติ ทำให้ไม่จำเป็นต้องระบุประเภทในทุกที่

let name = "John"; // TypeScript รู้ว่า name เป็น string
let age = 30;      // TypeScript รู้ว่า age เป็น number
let active = true; // TypeScript รู้ว่า active เป็น boolean

Type Assertions (การยืนยันประเภท)

การบอก TypeScript ว่าคุณรู้ประเภทข้อมูลดีกว่า ใช้เมื่อ TypeScript ไม่สามารถระบุประเภทที่ถูกต้องได้

// สร้างตัวแปรที่มีประเภทเป็น any
const jsonData: any = { id: 123, email: "[email protected]" };

// แบบ as - บอกให้ TypeScript ปฏิบัติกับ jsonData.id เป็น number
const userId = jsonData.id as number;

// แบบ angle-bracket (ใช้ได้เฉพาะใน .ts ไม่ใช่ .tsx)
// บอกให้ TypeScript ปฏิบัติกับ jsonData.email เป็น string
const userEmail = <string>jsonData.email;

Type Guards (การตรวจสอบประเภท)

เงื่อนไขที่ช่วยให้ TypeScript รู้ประเภทข้อมูลที่แน่นอนในบล็อกโค้ดนั้น

function process(value: string | number) {
  if (typeof value === "string") {
    // TypeScript รู้ว่า value เป็น string ในบล็อกนี้
    // จึงสามารถใช้ method ของ string ได้
    return value.toUpperCase();
  } else {
    // TypeScript รู้ว่า value เป็น number ในบล็อกนี้
    // จึงสามารถใช้ method ของ number ได้
    return value.toFixed(2);
  }
}