Type Inference ในภาษา TypeScript

การอนุมานประเภทข้อมูล (Type Inference)

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

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

ตัวอย่าง:

// การอนุมานประเภทข้อมูลพื้นฐาน
let name = "Wrikka";          // อนุมานเป็น string
let age = 25;                 // อนุมานเป็น number
let isActive = true;          // อนุมานเป็น boolean
let numbers = [1, 2, 3];      // อนุมานเป็น number[]

การอนุมานประเภทข้อมูลในฟังก์ชัน

คำอธิบาย: TypeScript สามารถอนุมานประเภทข้อมูลของค่าที่ส่งคืนจากฟังก์ชันได้โดยอัตโนมัติ

ตัวอย่าง:

// TypeScript อนุมานว่าฟังก์ชันนี้คืนค่าเป็น number
function add(a: number, b: number) {
  return a + b;
}

// ใช้กับ arrow function
const multiply = (a: number, b: number) => a * b;  // คืนค่าเป็น number

// อนุมานประเภทข้อมูลของตัวแปรจากค่าที่ได้จากฟังก์ชัน
let result = add(5, 3);  // อนุมานเป็น number

การอนุมานประเภทข้อมูลในตัวแปร

คำอธิบาย: เมื่อกำหนดค่าให้กับตัวแปร TypeScript จะอนุมานประเภทข้อมูลจากค่านั้น

ตัวอย่าง:

// อนุมานประเภทข้อมูลจากค่าเริ่มต้น
let message = "Hello";  // อนุมานเป็น string

// การกำหนดค่าใหม่ต้องเป็นประเภทเดียวกัน
message = "World";      // ถูกต้อง
// message = 123;       // ผิด! ไม่สามารถกำหนดค่า number ให้กับตัวแปรประเภท string ได้

// อนุมานประเภทข้อมูลในตัวแปร const
const PI = 3.14159;     // อนุมานเป็น 3.14159 (literal type)

การอนุมานประเภทข้อมูลใน Object

คำอธิบาย: TypeScript จะอนุมานประเภทข้อมูลของแต่ละ property ใน object

ตัวอย่าง:

// อนุมานประเภทข้อมูลใน object
let user = {
  name: "Wrikka",
  age: 25,
  isActive: true
};
// อนุมานเป็น { name: string; age: number; isActive: boolean; }

// การกำหนดค่าใหม่ต้องมี property และประเภทข้อมูลที่ตรงกัน
user.name = "TypeScript";  // ถูกต้อง
// user.age = "25";        // ผิด! ต้องเป็น number
// user.role = "admin";    // ผิด! ไม่มี property role

การอนุมานประเภทข้อมูลใน Array

คำอธิบาย: TypeScript จะอนุมานประเภทข้อมูลของ Array จากสมาชิกเริ่มต้น

ตัวอย่าง:

// อนุมานประเภทข้อมูลใน Array
let numbers = [1, 2, 3];  // อนุมานเป็น number[]

// Array ที่มีหลายประเภทข้อมูล
let mixed = [1, "two", 3, "four"];  // อนุมานเป็น (string | number)[]

// Array ว่าง
let empty = [];  // อนุมานเป็น any[]
// แนะนำให้ระบุประเภทข้อมูลเมื่อสร้าง Array ว่าง
let emptyNumbers: number[] = [];

การอนุมานประเภทข้อมูลใน Contextual Typing

คำอธิบาย: TypeScript สามารถอนุมานประเภทข้อมูลจากบริบทของโค้ด เช่น ในฟังก์ชัน callback

ตัวอย่าง:

// Contextual Typing ใน Array methods
let names = ["Alice", "Bob", "Charlie"];

// TypeScript รู้ว่า name เป็น string จากบริบทของ forEach
names.forEach(name => {
  console.log(name.toUpperCase());  // ถูกต้อง เพราะ name เป็น string
});

// Contextual Typing ใน Event Handlers
document.addEventListener("click", event => {
  // TypeScript รู้ว่า event เป็น MouseEvent จากบริบทของ addEventListener
  console.log(event.clientX, event.clientY);
});

ข้อจำกัดของการอนุมานประเภทข้อมูล

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

ตัวอย่าง:

// การประกาศตัวแปรโดยไม่กำหนดค่าเริ่มต้น
let value;  // อนุมานเป็น any
value = "string";
value = 123;  // สามารถเปลี่ยนประเภทข้อมูลได้เพราะเป็น any

// ฟังก์ชันที่รับพารามิเตอร์ที่ไม่มีการระบุประเภทข้อมูล
function process(data) {  // data เป็น any
  return data.length;  // อาจเกิดข้อผิดพลาดถ้า data ไม่มี property length
}

// แก้ไขโดยระบุประเภทข้อมูล
function processFixed(data: string | string[]) {
  return data.length;  // ปลอดภัย เพราะทั้ง string และ string[] มี property length
}