Type Assertions ในภาษา TypeScript

การแปลงประเภทข้อมูล (Type Assertions)

Type Assertions คือการบอก TypeScript ว่าเราทราบประเภทข้อมูลที่แน่นอนของตัวแปรมากกว่าที่ TypeScript สามารถวิเคราะห์ได้ ซึ่งเป็นการ "บังคับ" ให้ TypeScript เชื่อว่าตัวแปรมีประเภทข้อมูลตามที่เราระบุ

คำอธิบาย: Type Assertions ไม่ใช่การแปลงประเภทข้อมูลเหมือนใน C# หรือ Java แต่เป็นเพียงการบอก TypeScript ว่าเราทราบประเภทข้อมูลที่แน่นอน ไม่มีการเปลี่ยนแปลงโครงสร้างข้อมูลใดๆ ในระหว่างการรันโปรแกรม

ตัวอย่าง:

// รูปแบบที่ 1: ใช้ as
let someValue: unknown = "This is a string";
let strLength: number = (someValue as string).length;

// รูปแบบที่ 2: ใช้ angle-bracket syntax (ไม่แนะนำให้ใช้ใน JSX)
let otherValue: unknown = "Another string";
let otherLength: number = (<string>otherValue).length;

การใช้ Type Assertions กับ DOM

คำอธิบาย: Type Assertions มักใช้กับ DOM Elements เพื่อระบุประเภทที่เฉพาะเจาะจงมากขึ้น

ตัวอย่าง:

// ได้ Element ทั่วไป
const element = document.getElementById("myInput");

// แปลงเป็น HTMLInputElement เพื่อเข้าถึง properties เฉพาะ
const inputElement = element as HTMLInputElement;
inputElement.value = "New value"; // สามารถเข้าถึง value ได้

// หรือทำในบรรทัดเดียว
const value = (document.getElementById("myInput") as HTMLInputElement).value;

การใช้ Type Assertions กับ Object

คำอธิบาย: Type Assertions สามารถใช้กับ Object เพื่อระบุโครงสร้างที่เฉพาะเจาะจงมากขึ้น

ตัวอย่าง:

// กำหนด interface
interface User {
  id: number;
  name: string;
  email: string;
}

// ข้อมูลจาก API หรือแหล่งข้อมูลภายนอก
const userData: any = {
  id: 1,
  name: "Wrikka",
  email: "[email protected]"
};

// ใช้ Type Assertion เพื่อระบุว่าเป็น User
const user = userData as User;
console.log(user.name); // สามารถเข้าถึง properties ได้อย่างปลอดภัย

ข้อควรระวังในการใช้ Type Assertions

คำอธิบาย: Type Assertions เป็นการบอก TypeScript ให้เชื่อว่าตัวแปรมีประเภทข้อมูลตามที่เราระบุ ซึ่งอาจนำไปสู่ข้อผิดพลาดในระหว่างการรันโปรแกรมได้หากใช้ไม่ถูกต้อง

ตัวอย่าง:

// ข้อมูลจริงเป็น number
let value: any = 42;

// Type Assertion ที่ไม่ถูกต้อง
let name = value as string;

// จะเกิดข้อผิดพลาดเมื่อพยายามใช้ string methods
// name.toLowerCase(); // Runtime Error!

// การใช้ Type Assertion ซ้อนกัน (Double Assertion)
// ใช้เมื่อต้องการแปลงประเภทข้อมูลที่ไม่เกี่ยวข้องกัน
let num: number = 42;
let str = num as unknown as string; // ต้องผ่าน unknown ก่อน

การใช้ Type Assertions กับ Union Types

คำอธิบาย: Type Assertions มีประโยชน์มากเมื่อใช้กับ Union Types เพื่อระบุประเภทข้อมูลที่เฉพาะเจาะจงมากขึ้น

ตัวอย่าง:

// ฟังก์ชันที่รับ Union Type
function processValue(value: string | number) {
  if (typeof value === "string") {
    // TypeScript รู้ว่า value เป็น string ในบล็อกนี้
    console.log(value.toLowerCase());
  } else {
    // TypeScript รู้ว่า value เป็น number ในบล็อกนี้
    console.log(value.toFixed(2));
  }
  
  // ใช้ Type Assertion เมื่อ TypeScript ไม่สามารถวิเคราะห์ประเภทข้อมูลได้
  const strValue = value as string;
  // ควรใช้ Type Guard แทน Type Assertion เมื่อเป็นไปได้
}

const assertions

คำอธิบาย: TypeScript 3.4 เพิ่ม const assertions ซึ่งทำให้ TypeScript ปฏิบัติกับตัวแปรเหมือนเป็นค่าคงที่ที่ไม่สามารถเปลี่ยนแปลงได้

ตัวอย่าง:

// ปกติ literals จะถูกขยายเป็นประเภทข้อมูลทั่วไป
let color = "red"; // ประเภทข้อมูลเป็น string

// ใช้ const assertion เพื่อรักษา literal type
let constantColor = "red" as const; // ประเภทข้อมูลเป็น "red"

// ใช้กับ object
let user = {
  name: "Wrikka",
  role: "admin"
} as const;

// user.role = "user"; // ผิด! ไม่สามารถเปลี่ยนแปลงค่าได้
// user.name = "TypeScript"; // ผิด! ไม่สามารถเปลี่ยนแปลงค่าได้

// ใช้กับ array
let permissions = ["read", "write"] as const;
// permissions.push("delete"); // ผิด! ไม่สามารถเปลี่ยนแปลงค่าได้