TypeScript泛型进阶案例实战解析 你是否在使用TypeScript时，对泛型的运用感到困惑？是否渴望深入理解泛型，在实际项目中灵活运用？其实，TypeScript泛型就像一把万能钥匙，能打开各种复杂类型处理的大门。今天，就带大家深入探究TypeScript泛型进阶案例，让你对泛型有全新的认识和掌握。 泛型，简单来说，就是一种让类型也能参数化的机制。它允许我们在定义函数、类或接口时不预先指定具体的类型，而是在使用时再确定类型。这就好比我们打造了一辆通用的汽车模具，不同的人可以根据自己的需求，往这个模具里注入不同颜色、不同材质的零件，最终得到符合自己心意的汽车。
泛型函数进阶案例 先来看泛型函数。泛型函数就像是一个神奇的魔术师，可以根据传入的不同道具（类型），变出不同的魔术（执行不同类型的操作）。 案例一：创建一个通用的交换函数。我们想要实现一个函数，它可以交换任意类型的两个变量的值。如果不使用泛型，我们可能需要为不同类型（如数字、字符串等）分别编写不同的函数，这显然会让代码变得冗长和重复。 使用泛型函数就可以轻松解决这个问题。以下是代码示例： function swap<T>(a: T, b: T): [T, T] { return [b, a]; }
let num1 = 10; let num2 = 20; let result1 = swap(num1, num2); console.log(result1);
let str1 = 'hello'; let str2 = 'world'; let result2 = swap(str1, str2); console.log(result2);
在这个函数中，<T> 就是泛型类型参数，它代表任意类型。当我们调用 swap 函数时，TypeScript 会根据传入的参数自动推断出 T 的具体类型。这就好比我们有一个万能的交换机器，不管是苹果和橘子，还是书本和笔，都能轻松进行交换。 案例二：实现一个通用的数组反转函数。同样，我们可以使用泛型函数来实现一个可以反转任意类型数组的函数。 代码如下： function reverseArray<T>(arr: T[]): T[] { return arr.reverse(); }
let numArray = [1, 2, 3, 4, 5]; let reversedNumArray = reverseArray(numArray); console.log(reversedNumArray);
let strArray = ['a', 'b', 'c']; let reversedStrArray = reverseArray(strArray); console.log(reversedStrArray);
这里的泛型类型参数 T 表示数组中元素的类型。通过泛型，我们可以让这个函数适用于任何类型的数组，就像有一个通用的数组翻转器，不管是数字数组、字符串数组还是其他类型的数组，都能快速完成反转操作。
泛型类进阶案例 泛型类就像是一个通用的工厂模板，可以生产出不同类型的产品。 案例：创建一个通用的栈类。栈是一种后进先出（LIFO）的数据结构。我们可以使用泛型类来实现一个可以存储任意类型元素的栈。 代码如下： class Stack<T> { private items: T[] = [];
push(item: T) {
this.items.push(item);
}
pop(): T | undefined {
return this.items.pop();
}
peek(): T | undefined {
return this.items[this.items.length - 1];
}
isEmpty(): boolean {
return this.items.length === 0;
}
size(): number {
return this.items.length;
}
}
let numberStack = new Stack<number>(); numberStack.push(10); numberStack.push(20); console.log(numberStack.pop());
let stringStack = new Stack<string>(); stringStack.push('hello'); stringStack.push('world'); console.log(stringStack.pop());
在这个泛型类中，<T> 表示栈中元素的类型。当我们创建 www.ysdslt.com/Stack 类的实例时，需要指定具体的类型，如 Stack<number> 或 Stack<string>。这就好比我们有一个工厂，根据不同的订单（类型），可以生产出不同的产品（存储不同类型元素的栈）。
泛型接口进阶案例 泛型接口就像是一份通用的合同模板，不同的签约方（类型）可以根据这份模板签订不同的合同。 案例：创建一个通用的缓存接口。我们想要实现一个缓存系统，它可以存储不同类型的数据。可以使用泛型接口来定义这个缓存系统的结构。 代码如下： interface Cache<T> { get(key: string): T | undefined; set(key: string, value: T): void; }
class InMemoryCache<T> implements Cache<T> { private cache: { [key: string]: T } = {};
get(key: string): T | undefined {
return this.cache[key];
}
set(key: string, value: T): void {
this.cache[key] = value;
}
}
let numberCache = new InMemoryCache<number>(); numberCache.set('one', 1); console.log(numberCache.get('one'));
let stringCache = new InMemoryCache<string>(); stringCache.set('message', 'hello'); console.log(stringCache.get('message'));
在这个例子中，Cache 是一个泛型接口，它定义了缓存系统的基本操作。InMemoryCache 类实现了这个泛型接口，并且可以根据不同的类型参数存储不同类型的数据。这就好比我们有一份通用的合同模板，不管是买卖水果还是买卖电器，都可以根据这个模板签订合同，实现不同类型的交易（存储不同类型的数据）。
泛型约束进阶案例 有时候，我们不希望泛型可以是任意类型，而是希望它满足某些特定的条件，这时候就需要使用泛型约束。泛型约束就像是给泛型加上了一道门槛，只有符合条件的类型才能通过。 案例：实现一个函数，它可以获取对象的某个属性的值。我们希望这个函数只能处理具有特定属性的对象。 代码如下： interface HasProperty { [key: string]: any; }
function getProperty<T extends HasProperty, K extends keyof T>(obj: T, key: K) { return obj[key]; }
let person = { name: 'John', age: 30 }; let nameValue = getProperty(person, 'name'); console.log(nameValue);
在这个函数中，T extends HasProperty 表示泛型类型 T 必须是一个具有任意属性的对象。K extends keyof T 表示泛型类型 K 必须是 T 对象的属性名。通过泛型约束，我们可以确保函数只处理符合条件的对象和属性，就像给函数加上了一层保护罩，只允许符合要求的“客人”进入。
通过以上这些进阶案例的解析，相信你对 TypeScript 泛型有了更深入的理解和掌握。泛型就像一个强大的工具包，里面装着各种神奇的工具，只要你学会使用，就能在 TypeScript 的世界里游刃有余，轻松应对各种复杂的类型处理问题。快去实际项目中试试这些技巧吧，让你的代码更加灵活和强大！
