TypeScript 进阶之泛型，引爆你的编程创造力！

2023-12-03 05:30:31

TypeScript 泛型：释放编程潜能的强大工具

1. 泛型：代码重用的魔法杖

还在为重复编写相同的代码而苦恼吗？TypeScript 泛型是你的救星！泛型允许你编写可重用的代码，让你一劳永逸地摆脱代码重复的困扰。

想象一下，你想创建一个函数来交换两个元素的位置。传统方法需要为不同的数据类型编写多个函数。但有了泛型，你可以编写一个通用的函数，轻松处理所有数据类型。

// 定义一个泛型函数来交换两个元素的位置
function swap<T>(a: T, b: T): void {
  const temp = a;
  a = b;
  b = temp;
}

// 使用泛型函数交换两个数字
swap(1, 2); // [2, 1]

// 使用泛型函数交换两个字符串
swap('Hello', 'World'); // ['World', 'Hello']

通过修改泛型类型参数，同一个函数可以用于交换不同类型的数据，提高了代码的可重用性和灵活性。

2. 类型约束：为你的代码保驾护航

虽然泛型很强大，但有时需要对它们进行约束，以确保代码的安全性。TypeScript 提供了多种类型约束，让你轻松控制泛型函数的参数和返回值类型。

// 定义一个泛型函数，要求参数和返回值都为同一类型
function identity<T>(x: T): T {
  return x;
}

// 正确使用
identity<number>(10); // 10

// 错误使用，类型不匹配
identity<number>('Hello'); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

通过类型约束，你可以确保泛型函数只接受和返回指定类型的数据，避免不必要的错误。

3. 类泛型：面向对象的泛型之道

TypeScript 中的类也可以使用泛型，创建可重用的类模板。

// 定义一个泛型类，可以存储任何类型的数据
class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}

// 创建一个字符串栈
const stringStack = new Stack<string>();
stringStack.push('Hello');
stringStack.push('World');
console.log(stringStack.pop()); // 'World'

// 创建一个数字栈
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // 2