入门指南：如何使用泛型让你的 TypeScript 代码更灵活

2024-01-11 12:45:16

泛型：TypeScript 中的可重用代码利器

TypeScript 中的泛型是一个强大的特性，它允许我们创建通用的代码，可以用于不同的数据类型，而无需重复编写代码。这大大提高了代码的可重用性和灵活性。

泛型函数

泛型函数接受未知类型的参数，允许我们在运行时动态指定数据类型。例如，我们可以创建一个计算数组中元素平均值的泛型函数：

function average<T>(arr: T[]): number {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum / arr.length;
}

const numbers = [1, 2, 3, 4, 5];
const averageNumber = average(numbers);
console.log(averageNumber); // 3

const strings = ['a', 'b', 'c', 'd', 'e'];
const averageString = average(strings);
console.log(averageString); // NaN

在这个示例中，average 函数接受一个数组作为参数，并返回数组中元素的平均值。泛型参数 T 允许该函数处理任何类型的数据，包括数字和字符串。

泛型接口

泛型接口定义了一组方法和属性，这些方法和属性可以用于不同类型的数据。例如，我们可以创建一个表示对象的泛型接口：

interface IObject<T> {
  key: string;
  value: T;
}

const obj1: IObject<number> = { key: 'age', value: 25 };
const obj2: IObject<string> = { key: 'name', value: 'John' };

在这个示例中，IObject 接口定义了一个具有 key 和 value 属性的对象。泛型参数 T 允许该接口用于任何类型的数据，包括数字和字符串。

泛型类

泛型类允许我们创建通用的类，这些类可以存储和处理不同类型的数据。例如，我们可以创建一个栈类：

class Stack<T> {
  private arr: T[] = [];

  push(item: T) {
    this.arr.push(item);
  }

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

  peek(): T | undefined {
    return this.arr[this.arr.length - 1];
  }

  isEmpty(): boolean {
    return this.arr.length === 0;
  }
}

const numbersStack = new Stack<number>();
numbersStack.push(1);
numbersStack.push(2);
numbersStack.push(3);
const poppedNumber = numbersStack.pop();
console.log(poppedNumber); // 3

const stringsStack = new Stack<string>();
stringsStack.push('a');
stringsStack.push('b');
stringsStack.push('c');
const poppedString = stringsStack.pop();
console.log(poppedString); // c