TypeScript Generics: การจัดการชนิดข้อมูลที่ซับซ้อนอย่างเชี่ยวชาญเพื่อแอปพลิเคชันที่แข็งแกร่ง

TypeScript ซึ่งเป็นส่วนขยายของ JavaScript ช่วยให้นักพัฒนาสามารถเขียนโค้ดที่แข็งแกร่งและบำรุงรักษาง่ายขึ้นผ่าน static typing หนึ่งในฟีเจอร์ที่ทรงพลังที่สุดคือ generics ซึ่งช่วยให้คุณสามารถเขียนโค้ดที่ทำงานได้กับชนิดข้อมูลที่หลากหลายในขณะที่ยังคงความปลอดภัยของชนิดข้อมูล (type safety) คู่มือนี้จะสำรวจ TypeScript generics อย่างละเอียด โดยเน้นที่การประยุกต์ใช้กับชนิดข้อมูลที่ซับซ้อนในบริบทของการพัฒนาซอฟต์แวร์ระดับโลก

Generics คืออะไร?

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

ประโยชน์ของการใช้ Generics

• การนำโค้ดกลับมาใช้ใหม่ (Code Reusability): เขียนโค้ดเพียงครั้งเดียวและใช้กับชนิดข้อมูลที่แตกต่างกันได้ ซึ่งช่วยลดการทำซ้ำของโค้ดและทำให้โค้ดเบสของคุณบำรุงรักษาง่ายขึ้น
• ความปลอดภัยของชนิดข้อมูล (Type Safety): Generics ช่วยให้ TypeScript compiler สามารถบังคับใช้ความปลอดภัยของชนิดข้อมูลในขณะคอมไพล์ได้ ซึ่งช่วยป้องกันข้อผิดพลาดขณะรันไทม์ที่เกี่ยวข้องกับชนิดข้อมูลที่ไม่ตรงกัน
• เพิ่มความสามารถในการอ่านโค้ด (Improved Readability): Generics ทำให้โค้ดของคุณอ่านง่ายขึ้นโดยการระบุชนิดข้อมูลที่ฟังก์ชันและคลาสของคุณถูกออกแบบมาให้ทำงานด้วยอย่างชัดเจน
• ประสิทธิภาพที่ดีขึ้น (Enhanced Performance): ในบางกรณี generics สามารถนำไปสู่การปรับปรุงประสิทธิภาพได้ เนื่องจากคอมไพเลอร์สามารถปรับโค้ดที่สร้างขึ้นให้เหมาะสมที่สุดตามชนิดข้อมูลเฉพาะที่ถูกใช้งาน

ไวยากรณ์พื้นฐานของ Generics

ไวยากรณ์พื้นฐานของ generics เกี่ยวข้องกับการใช้วงเล็บมุม (< >) เพื่อประกาศพารามิเตอร์ชนิดข้อมูล โดยทั่วไปพารามิเตอร์ชนิดข้อมูลเหล่านี้จะมีชื่อว่า T, K, V เป็นต้น แต่คุณสามารถใช้ชื่อที่ถูกต้องใดก็ได้ นี่คือตัวอย่างง่ายๆ ของฟังก์ชัน generic:

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

let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(123);
let myBoolean: boolean = identity<boolean>(true);

console.log(myString); // ผลลัพธ์: hello
console.log(myNumber); // ผลลัพธ์: 123
console.log(myBoolean); // ผลลัพธ์: true

ในตัวอย่างนี้ <T> ประกาศพารามิเตอร์ชนิดข้อมูลชื่อ T ฟังก์ชัน identity รับอาร์กิวเมนต์ชนิด T และคืนค่าชนิด T เมื่อเรียกใช้ฟังก์ชัน คุณสามารถระบุพารามิเตอร์ชนิดข้อมูลอย่างชัดเจน (เช่น identity<string>) หรือปล่อยให้ TypeScript อนุมานจากชนิดของอาร์กิวเมนต์ได้

การทำงานกับชนิดข้อมูลที่ซับซ้อน

Generics จะมีประโยชน์อย่างยิ่งเมื่อต้องจัดการกับชนิดข้อมูลที่ซับซ้อน เช่น อาร์เรย์, อ็อบเจกต์ และอินเทอร์เฟซ ลองมาดูสถานการณ์ที่พบบ่อยบางอย่าง:

Generic Arrays

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

function arrayToString<T>(arr: T[]): string {
  return arr.join(", ");
}

let numberArray: number[] = [1, 2, 3, 4, 5];
let stringArray: string[] = ["apple", "banana", "cherry"];

console.log(arrayToString(numberArray)); // ผลลัพธ์: 1, 2, 3, 4, 5
console.log(arrayToString(stringArray)); // ผลลัพธ์: apple, banana, cherry

ในที่นี้ ฟังก์ชัน arrayToString รับอาร์เรย์ชนิด T[] และคืนค่าสตริงที่แสดงถึงอาร์เรย์นั้น ฟังก์ชันนี้ทำงานกับอาร์เรย์ของชนิดข้อมูลใดก็ได้ ทำให้สามารถนำกลับมาใช้ใหม่ได้อย่างสูง

Generic Objects

Generics ยังสามารถใช้เพื่อกำหนดฟังก์ชันหรือคลาสที่ทำงานกับอ็อบเจกต์ที่มีรูปร่างแตกต่างกันได้:

interface Person {
  name: string;
  age: number;
  country: string; // เพิ่มประเทศสำหรับบริบทระดับโลก
}

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string; // เพิ่มสกุลเงินสำหรับบริบทระดับโลก
}

function displayInfo<T extends { name: string }>(item: T): void {
  console.log(`Name: ${item.name}`);
}

let person: Person = { name: "Alice", age: 30, country: "USA" };
let product: Product = { id: 1, name: "Laptop", price: 1200, currency: "USD" };

displayInfo(person); // ผลลัพธ์: Name: Alice
displayInfo(product); // ผลลัพธ์: Name: Laptop

ในตัวอย่างนี้ ฟังก์ชัน displayInfo รับอ็อบเจกต์ชนิด T ซึ่งต้องมี property name ที่เป็นชนิดสตริง ส่วน extends { name: string } คือ constraint (ข้อจำกัด) ซึ่งระบุข้อกำหนดขั้นต่ำสำหรับพารามิเตอร์ชนิดข้อมูล T เพื่อให้แน่ใจว่าฟังก์ชันสามารถเข้าถึง property name ได้อย่างปลอดภัย

การใช้งาน Generic ขั้นสูง

TypeScript generics มีฟีเจอร์ขั้นสูงที่ช่วยให้คุณสร้างโค้ดที่ยืดหยุ่นและทรงพลังยิ่งขึ้น ลองมาดูฟีเจอร์เหล่านี้บางส่วน:

พารามิเตอร์ชนิดข้อมูลหลายตัว

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

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

interface Name {
  firstName: string;
}

interface Age {
  age: number;
}

const person: Name = { firstName: "Bob" };
const details: Age = { age: 42 };

const merged = merge(person, details);
console.log(merged.firstName); // ผลลัพธ์: Bob
console.log(merged.age); // ผลลัพธ์: 42

ฟังก์ชัน merge รับอ็อบเจกต์สองตัวชนิด T และ U และคืนค่าอ็อบเจกต์ใหม่ที่ประกอบด้วย property ของทั้งสองอ็อบเจกต์ ซึ่งเป็นวิธีที่ทรงพลังในการรวมข้อมูลจากแหล่งต่างๆ

ข้อจำกัดของ Generic

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

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity([1, 2, 3]); // ผลลัพธ์: 3
loggingIdentity("hello"); // ผลลัพธ์: 5
// loggingIdentity(123); // ข้อผิดพลาด: อาร์กิวเมนต์ชนิด 'number' ไม่สามารถกำหนดให้กับพารามิเตอร์ชนิด 'Lengthwise' ได้

ฟังก์ชัน loggingIdentity รับอาร์กิวเมนต์ชนิด T ที่ต้องมี property length ที่เป็นชนิด number ซึ่งช่วยให้แน่ใจว่าฟังก์ชันสามารถเข้าถึง property length ได้อย่างปลอดภัย

คลาสแบบ Generic

Generics ยังสามารถใช้กับคลาสได้อีกด้วย:

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data = this.data.filter(d => d !== item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem("apple");
textStorage.addItem("banana");
textStorage.removeItem("apple");
console.log(textStorage.getItems()); // ผลลัพธ์: [ 'banana' ]

const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);
numberStorage.removeItem(1);
console.log(numberStorage.getItems()); // ผลลัพธ์: [ 2 ]

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

อินเทอร์เฟซแบบ Generic

อินเทอร์เฟซแบบ Generic มีประโยชน์สำหรับการกำหนดสัญญา (contracts) ที่สามารถทำงานกับชนิดข้อมูลต่างๆ ได้ ตัวอย่างเช่น:

interface Result<T, E> {
  success: boolean;
  data?: T;
  error?: E;
}

interface User {
  id: number;
  username: string;
  email: string;
}

interface ErrorMessage {
  code: number;
  message: string;
}

function fetchUser(id: number): Result<User, ErrorMessage> {
  if (id === 1) {
    return { success: true, data: { id: 1, username: "john.doe", email: "john.doe@example.com" } };
  } else {
    return { success: false, error: { code: 404, message: "User not found" } };
  }
}

const userResult = fetchUser(1);
if (userResult.success) {
  console.log(userResult.data.username);
} else {
  console.log(userResult.error.message);
}

อินเทอร์เฟซ Result กำหนดโครงสร้างทั่วไปสำหรับแสดงผลลัพธ์ของการดำเนินการ ซึ่งอาจมีข้อมูลชนิด T หรือข้อผิดพลาดชนิด E นี่เป็นรูปแบบที่พบบ่อยสำหรับการจัดการการดำเนินการแบบอะซิงโครนัสหรือการดำเนินการที่อาจล้มเหลว

Utility Types และ Generics

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

Partial<T>

Partial<T> ทำให้ property ทั้งหมดของชนิด T เป็นทางเลือก (optional):

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = { name: "Alice" }; // ถูกต้อง

Readonly<T>

Readonly<T> ทำให้ property ทั้งหมดของชนิด T เป็นแบบอ่านอย่างเดียว (readonly):

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;

const readonlyPerson: ReadonlyPerson = { name: "Bob", age: 42 };
// readonlyPerson.age = 43; // ข้อผิดพลาด: ไม่สามารถกำหนดค่าให้ 'age' ได้เนื่องจากเป็น property แบบอ่านอย่างเดียว

Pick<T, K>

Pick<T, K> เลือกชุดของ property K จากชนิด T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const nameAndAge: NameAndAge = { name: "Charlie", age: 28 };

Omit<T, K>

Omit<T, K> ลบชุดของ property K ออกจากชนิด T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, "email">;

const personWithoutEmail: PersonWithoutEmail = { name: "David", age: 35 };

Record<K, T>

Record<K, T> สร้างชนิดข้อมูลที่มีคีย์เป็น K และค่าเป็นชนิด T:

type CountryCodes = "US" | "CA" | "UK" | "DE" | "FR" | "JP" | "CN" | "IN" | "BR" | "AU"; // ขยายรายการสำหรับบริบทระดับโลก
type Currency = "USD" | "CAD" | "GBP" | "EUR" | "JPY" | "CNY" | "INR" | "BRL" | "AUD"; // ขยายรายการสำหรับบริบทระดับโลก

type CurrencyMap = Record<CountryCodes, Currency>;

const currencyMap: CurrencyMap = {
  "US": "USD",
  "CA": "CAD",
  "UK": "GBP",
  "DE": "EUR",
  "FR": "EUR",
  "JP": "JPY",
  "CN": "CNY",
  "IN": "INR",
  "BR": "BRL",
  "AU": "AUD",
};

Mapped Types

Mapped types ช่วยให้คุณสามารถแปลงชนิดข้อมูลที่มีอยู่โดยการวนซ้ำผ่าน property ของมัน นี่เป็นวิธีที่ทรงพลังในการสร้างชนิดข้อมูลใหม่จากชนิดข้อมูลที่มีอยู่ ตัวอย่างเช่น คุณสามารถสร้างชนิดข้อมูลที่ทำให้ property ทั้งหมดของชนิดข้อมูลอื่นเป็นแบบอ่านอย่างเดียว:

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const readonlyPerson: ReadonlyPerson = { name: "Eve", age: 25 };
// readonlyPerson.age = 26; // ข้อผิดพลาด: ไม่สามารถกำหนดค่าให้ 'age' ได้เนื่องจากเป็น property แบบอ่านอย่างเดียว

ในตัวอย่างนี้ [K in keyof Person] จะวนซ้ำผ่านคีย์ทั้งหมดของอินเทอร์เฟซ Person และ Person[K] จะเข้าถึงชนิดข้อมูลของแต่ละ property คำสำคัญ readonly ทำให้แต่ละ property เป็นแบบอ่านอย่างเดียว

Conditional Types

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

type NonNullable<T> = T extends null | undefined ? never : T;

type MaybeString = string | null | undefined;
type StringType = NonNullable<MaybeString>; // string

function getValue<T>(value: T): NonNullable<T> {
  if (value == null) { // จัดการทั้ง null และ undefined
    throw new Error("Value cannot be null or undefined");
  }
  return value as NonNullable<T>;
}

try {
  const validValue = getValue("hello");
  console.log(validValue.toUpperCase()); // ผลลัพธ์: HELLO

  const invalidValue = getValue(null); // ส่วนนี้จะทำให้เกิดข้อผิดพลาด
  console.log(invalidValue); // บรรทัดนี้จะไม่ถูกเรียกใช้งาน
} catch (error: any) {
  console.error(error.message); // ผลลัพธ์: Value cannot be null or undefined
}

ในตัวอย่างนี้ ชนิด NonNullable<T> จะตรวจสอบว่า T เป็น null หรือ undefined หรือไม่ ถ้าใช่ จะคืนค่าเป็น never ซึ่งหมายความว่าชนิดข้อมูลนั้นไม่ได้รับอนุญาต มิฉะนั้นจะคืนค่าเป็น T ซึ่งช่วยให้คุณสร้างชนิดข้อมูลที่รับประกันได้ว่าจะไม่เป็นค่าว่าง (non-nullable)

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ Generics

นี่คือแนวทางปฏิบัติที่ดีที่สุดที่ควรจำไว้เมื่อใช้ generics:

• ใช้ชื่อพารามิเตอร์ชนิดข้อมูลที่สื่อความหมาย: เลือกชื่อที่ระบุวัตถุประสงค์ของพารามิเตอร์ชนิดข้อมูลอย่างชัดเจน
• ใช้ข้อจำกัดเพื่อจำกัดชนิดข้อมูลที่สามารถใช้กับพารามิเตอร์ชนิดข้อมูล generic: เพื่อให้แน่ใจว่าโค้ด generic ของคุณสามารถทำงานกับชนิดข้อมูลที่ระบุได้อย่างปลอดภัย
• ทำให้โค้ด generic ของคุณเรียบง่ายและมีจุดมุ่งหมายที่ชัดเจน: หลีกเลี่ยงการทำให้โค้ด generic ของคุณซับซ้อนเกินไปด้วยพารามิเตอร์ชนิดข้อมูลหรือข้อจำกัดที่ซับซ้อนมากเกินไป
• จัดทำเอกสารสำหรับโค้ด generic ของคุณอย่างละเอียด: อธิบายวัตถุประสงค์ของพารามิเตอร์ชนิดข้อมูลและข้อจำกัดใดๆ ที่ใช้
• พิจารณาข้อดีข้อเสียระหว่างการนำโค้ดกลับมาใช้ใหม่และความปลอดภัยของชนิดข้อมูล: ในขณะที่ generics สามารถปรับปรุงการนำโค้ดกลับมาใช้ใหม่ได้ แต่ก็อาจทำให้โค้ดของคุณซับซ้อนขึ้น ชั่งน้ำหนักข้อดีและข้อเสียก่อนที่จะใช้ generics
• พิจารณาการแปลและการปรับให้เข้ากับท้องถิ่น (l10n และ g11n): เมื่อต้องจัดการกับข้อมูลที่ต้องแสดงต่อผู้ใช้ในภูมิภาคต่างๆ ตรวจสอบให้แน่ใจว่า generics ของคุณรองรับการจัดรูปแบบและธรรมเนียมปฏิบัติทางวัฒนธรรมที่เหมาะสม ตัวอย่างเช่น การจัดรูปแบบตัวเลขและวันที่อาจแตกต่างกันอย่างมากในแต่ละท้องถิ่น

ตัวอย่างในบริบทระดับโลก

ลองพิจารณาตัวอย่างบางส่วนเกี่ยวกับวิธีการใช้ generics ในบริบทระดับโลก:

การแปลงสกุลเงิน

interface ConversionRate {
  rate: number;
  fromCurrency: string;
  toCurrency: string;
}

function convertCurrency<T extends ConversionRate>(amount: number, rate: T): number {
  return amount * rate.rate;
}

const usdToEurRate: ConversionRate = { rate: 0.85, fromCurrency: "USD", toCurrency: "EUR" };
const amountInUSD = 100;
const amountInEUR = convertCurrency(amountInUSD, usdToEurRate);
console.log(`${amountInUSD} USD is equal to ${amountInEUR} EUR`); // ผลลัพธ์: 100 USD is equal to 85 EUR

การจัดรูปแบบวันที่

interface DateFormatOptions {
  locale: string;
  options: Intl.DateTimeFormatOptions;
}

function formatDate<T extends DateFormatOptions>(date: Date, format: T): string {
  return date.toLocaleDateString(format.locale, format.options);
}

const currentDate = new Date();

const usDateFormat: DateFormatOptions = { locale: "en-US", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const germanDateFormat: DateFormatOptions = { locale: "de-DE", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const japaneseDateFormat: DateFormatOptions = { locale: "ja-JP", options: { year: 'numeric', month: 'long', day: 'numeric' } };

console.log("US Date: " + formatDate(currentDate, usDateFormat));
console.log("German Date: " + formatDate(currentDate, germanDateFormat));
console.log("Japanese Date: " + formatDate(currentDate, japaneseDateFormat));

บริการแปลภาษา

interface Translation {
  [key: string]: string; // อนุญาตให้ใช้คีย์ภาษาแบบไดนามิก
}

interface LanguageData<T extends Translation> {
  languageCode: string;
  translations: T;
}

const englishTranslations: Translation = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our website!"
};

const spanishTranslations: Translation = {
  "hello": "Hola",
  "goodbye": "Adiós",
  "welcome": "¡Bienvenido a nuestro sitio web!"
};

const frenchTranslations: Translation = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre site web !"
};


const languageData: LanguageData<typeof englishTranslations>[] = [
  {languageCode: "en", translations: englishTranslations },
  {languageCode: "es", translations: spanishTranslations },
  {languageCode: "fr", translations: frenchTranslations}
];

function translate<T extends Translation>(key: string, languageCode: string, languageData: LanguageData<T>[]): string {
  const lang = languageData.find(lang => lang.languageCode === languageCode);
  if (!lang) {
    return `Translation for ${key} in ${languageCode} not found.`;
  }
  return lang.translations[key] || `Translation for ${key} not found.`;
}

console.log(translate("hello", "en", languageData)); // ผลลัพธ์: Hello
console.log(translate("hello", "es", languageData)); // ผลลัพธ์: Hola
console.log(translate("welcome", "fr", languageData)); // ผลลัพธ์: Bienvenue sur notre site web !
console.log(translate("missingKey", "de", languageData)); // ผลลัพธ์: Translation for missingKey in de not found.

สรุป

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