前端技术回顾系列 10｜TS 泛型在类和接口中的应用

在微信中阅读，关注公众号：CodeFit。

创作不易，如果你觉得这篇文章对您有帮助，请不要忘了 点赞、分享 和 关注 我的公众号：CodeFit，为我的持续创作提供动力。

上文回顾：约束泛型（Generic Constraints）

上一篇文章我们回顾了 泛型 在 TypeScript 中的高级用法 —— 泛型约束。

通过 extends 关键字，我们可以确保传入的类型具有 特定 的属性或方法。

这样可以提高代码的类型 安全性 和 灵活性，使得 泛型 不仅可以是 任意 类型，还可以是某些 特定 属性或方法的类型。

泛型在类和接口中的应用

之前的 泛型 内容侧重于在 函数 中的使用。

本文会更多地看看 泛型 在 类 和 接口 中的应用。

大纲

1. 问题引入：队列的实现
2. 使用泛型改进队列类
3. 泛型在接口中的应用
4. 定义泛型接口
5. 泛型数组
6. 总结

1. 问题引入：队列的实现

假设我们要通过 类 来实现一个 队列，这个类需要两个方法：

• push 用于将元素加入队列。
• pop 用于将元素从队列中移出。

队列 是一种 数据结构，特点是 先进先出。

首先，我们来实现一个 没有 使用 泛型 的 队列类。

class Queue {
  private data: any[] = [];

  push(item: any): void {
    this.data.push(item);
  }

  pop(): any {
    return this.data.shift();
  }
}

const queue = new Queue();
queue.push(1);
queue.push("hello");

const item = queue.pop();
if (typeof item === "number") {
  console.log(item.toFixed(2)); // 这里会报错，因为 item 可能不是数字
}

在这个例子中，我们使用了 any 类型，也就是 队列 可以接受任何类型的数据，这样在使用时就失去了 类型安全性。

2. 使用泛型改进队列类

我们希望 队列 能够在 类型安全 的前提下处理 不同类型 的数据。

根据上几篇文章中回顾的 泛型 内容，我们可以使用 泛型 来改进这个队列。

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

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

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

const numberQueue = new Queue<number>();
numberQueue.push(1);
// numberQueue.push("hello"); // 这里会报错，因为 "hello" 不是 number 类型

const numberItem = numberQueue.pop();
if (numberItem !== undefined) {
  console.log(numberItem.toFixed(2)); // 现在没有错误
}

const stringQueue = new Queue<string>();
stringQueue.push("hello");
// stringQueue.push(1); // 这里会报错，因为 1 不是 string 类型

const stringItem = stringQueue.pop();
if (stringItem !== undefined) {
  console.log(stringItem.toUpperCase()); // 现在没有错误
}

通过使用 泛型，我们可以创建 类型安全 的队列类，不论存储的数据类型是什么，都能避免类型出现不一致性。

3. 泛型在接口中的应用

泛型 不仅可以用于 类，还可以用于 接口。

我们可以使用 泛型接口 来定义具有灵活类型的数据结构。

4. 定义泛型接口

假设我们有一个 键值对接口，我们希望 键 和 值 的类型可以在使用时 动态 指定：

interface KeyValuePair<K, V> {
  key: K;
  value: V;
}

const numStrPair: KeyValuePair<number, string> = { key: 1, value: "one" };
const strNumPair: KeyValuePair<string, number> = { key: "one", value: 1 };

在这个例子中，KeyValuePair 接口使用了两个泛型参数 K 和 V，使得我们可以在实例化时指定 键 和 值 的类型。

5. 泛型数组

我们还可以使用 泛型 来定义 数组类型：

let numberArray: Array<number> = [1, 2, 3];
let stringArray: Array<string> = ["a", "b", "c"];

这种方式等同于：

let numberArray: number[] = [1, 2, 3];
let stringArray: string[] = ["a", "b", "c"];

6. 总结

8、9、10 这几篇内容回顾了 TypeScript 中 泛型 的基本用法及其在 函数、类 和 接口 中的应用。

泛型 提供了 类型安全 和 灵活性，使我们能够编写更加 通用 和 可重用 的代码。

在实际开发中，泛型 是一种非常强大的工具，能够帮助我们解决复杂的 类型问题，提高代码的 健壮性。

希望大家能多花一些时间来练习泛型的使用，逐步掌握这部分内容的精髓。

---

感谢你的阅读！

如果觉得这篇文章对您有所帮助，请点赞、分享，并关注 CodeFit，这样就不会错过更多的精彩内容。

同时，您的 支持 和 反馈 对我非常重要，欢迎在评论区留言，与我互动。

谢谢大家，下次见！