เจเนอริกส์

ยินดีต้อนรับสู่บทเรียนถัดไป! ในบทเรียนนี้ คุณจะได้เรียนรู้เกี่ยวกับ เจเนอริกส์ ซึ่งเป็นคุณลักษณะอันทรงพลังใน TypeScript ที่ช่วยให้คุณสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้และปลอดภัยด้านชนิดข้อมูล มาเริ่มกันเลย!

เจเนอริกส์คืออะไร

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

ตัวอย่าง: ฟังก์ชันแบบเจเนอริก:

งาน: เขียนฟังก์ชันแบบเจเนอริกที่รับอาร์กิวเมนต์และส่งคืนค่าเดิมโดยไม่เปลี่ยนแปลง

function identity<T>(value: T): T {
  return value;
}

console.log(identity<string>("Hello")); 
// Output: Hello
console.log(identity<number>(42)); 
// Output: 42

เหตุใดจึงควรใช้เจเนอริกส์

เจเนอริกส์ช่วยให้คุณ:

• เขียนโค้ดที่นำกลับมาใช้ใหม่ได้: ฟังก์ชันและคลาสสามารถทำงานกับชนิดข้อมูลต่าง ๆ ได้
• มั่นใจในความปลอดภัยของชนิดข้อมูล: คุณสามารถบังคับใช้ชนิดข้อมูลเฉพาะได้โดยไม่สูญเสียความยืดหยุ่น
• ลดความซ้ำซ้อน: หลีกเลี่ยงการเขียนฟังก์ชันหรือคลาสเดียวกันแยกกันหลายเวอร์ชันสำหรับชนิดข้อมูลต่าง ๆ

เคล็ดลับ: ใช้เจเนอริกส์เพื่อเขียนโค้ดที่ยืดหยุ่นและดูแลรักษาได้ง่ายขึ้น

ฟังก์ชันแบบเจเนอริก

คุณสามารถใช้เจเนอริกส์เพื่อสร้างฟังก์ชันที่ยืดหยุ่นได้ ตัวอย่าง:

งาน: เขียนฟังก์ชันแบบเจเนอริกที่รวมออบเจ็กต์สองรายการและส่งคืนผลลัพธ์

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

let merged = merge({ name: "Alice" }, { age: 25 });
console.log(merged); 
// Output: { name: "Alice", age: 25 }

คลาสแบบเจเนอริก

สามารถใช้เจเนอริกส์ในคลาสเพื่อทำให้คลาสนำกลับมาใช้ใหม่กับชนิดข้อมูลต่าง ๆ ได้ ตัวอย่าง:

class Box<T> {
  private contents: T;

  constructor(contents: T) {
    this.contents = contents;
  }

  getContents(): T {
    return this.contents;
  }
}

let stringBox = new Box<string>("Hello");
console.log(stringBox.getContents()); 
// Output: Hello

let numberBox = new Box<number>(42);
console.log(numberBox.getContents()); 
// Output: 42

อินเทอร์เฟซแบบเจเนอริก

อินเทอร์เฟซยังสามารถใช้เจเนอริกส์เพื่อบังคับใช้โครงสร้างกับชนิดข้อมูลต่าง ๆ ได้ ตัวอย่าง:

งาน: กำหนดอินเทอร์เฟซแบบเจเนอริก และสร้างออบเจ็กต์ที่นำอินเทอร์เฟซนั้นไปใช้

interface Pair<T, U> {
  first: T;
  second: U;
}

let coordinates: Pair<number, number> = { first: 10, second: 20 };
console.log(coordinates); 
// Output: { first: 10, second: 20 }

ข้อจำกัดของเจเนอริกส์

คุณสามารถเพิ่มข้อจำกัดให้กับเจเนอริกส์ เพื่อให้มั่นใจว่าเจเนอริกส์จะทำงานได้เฉพาะกับชนิดข้อมูลบางประเภทเท่านั้น ตัวอย่าง:

function printLength<T extends { length: number }>(item: T): void {
  console.log(`Length: ${item.length}`);
}

printLength("Hello"); 
// Output: Length: 5
printLength([1, 2, 3]); 
// Output: Length: 3
// printLength(42); 
// Error: Argument of type 'number' is not assignable to parameter of type '{ length: number }'.

ค่าเริ่มต้นของเจเนอริกส์

คุณสามารถระบุชนิดข้อมูลเริ่มต้นสำหรับเจเนอริกส์ได้ หากไม่มีการระบุชนิดข้อมูล ตัวอย่าง:

งาน: สร้างฟังก์ชันแบบเจเนอริกที่มีชนิดข้อมูลเริ่มต้น และทดสอบฟังก์ชันนั้นกับชนิดข้อมูลต่าง ๆ

function wrap<T = string>(value: T): T[] {
  return [value];
}

console.log(wrap("Hello")); // Output: ["Hello"]
console.log(wrap(42)); // Output: [42]

ยอดเยี่ยมมาก!

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