Byte Ebi's Logo

Byte Ebi 🍤

每天一小口,蝦米變鯨魚

TypeScript 泛型(Generic)

使用 TypeScript 泛型來撰寫可重用且型別安全的程式碼

Ray

介紹 TypeScript 的泛型,說明如何透過定義靈活的函式、介面與類別來提高程式的可重用性

在定義方法、介面或類別時不預先指定資料型別,而在使用時再指定型別的特性

// 原方法,不同型別需要寫多份相似的程式碼
const pushStrArr = (arr: string[], item: string): string[] => {
  arr.push(item);
  return arr;
};

const pushNumarr = (arr: number[], item: number): number[] => {
  arr.push(item);
  return arr;
};

// 使用泛型,「T」只是一個代號,必須大寫
const pushArr = <T>(arr: T[], item: T): T[] => {
  arr.push(item);
  return arr;
};

// 透過聲明 <T> 的內容來宣告使用的型別
pushArr<number>([1, 2, 3, 4], 5);
pushArr<string>(["a", "b", "c"], "d");

// 使用多個型別的泛型
function swapGeneric<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]]; // 前後交換位置
}

/** 
聲明 T = string, U = number
後續使用到 T, U 就會識別成這兩個型別
**/
const res = swapGeneric<string, number>(["123", 456]);
// res = [456, '123']

最新文章

Category

Tag