面试官：你对TS的泛型怎么理解？

在前端面试中，TypeScript（TS）几乎是必考内容，而"泛型"又是其中的重点。很多同学第一次看到泛型时会有点懵，其实理解它的核心思想后，泛型并不复杂。今天我就结合实际项目中的例子，聊聊我对 TS 泛型 的理解。

1. 为什么需要泛型？

在刚接触 TypeScript 时，我们经常会写这样的代码：

ts 复制代码

function getFirstElement(arr: any[]): any {
  return arr[0];
}

这个函数看似没问题，能传数字数组、字符串数组，但返回值类型全是 any，类型安全完全丢了。比如：

ts 复制代码

const firstNum = getFirstElement([1, 2, 3]);
firstNum.toFixed(2); // 这里可能直接报错，因为返回值不一定是 number

所以我们希望：

参数和返回值类型保持一致；
函数能复用，不管传数字还是字符串数组都行。

这时候就需要泛型了。

2. 泛型的概念

泛型可以理解为 类型的参数化 ，它和函数的参数类似，只不过参数是运行时的，而泛型是在类型层面传参。

ts 复制代码

function getFirstElement<T>(arr: T[]): T | undefined {
  return arr.length > 0 ? arr[0] : undefined;
}

T 就是一个 类型变量，类似函数里的参数占位符；
调用时可以自动推导 类型，也可以手动指定：

ts 复制代码

const firstNum = getFirstElement([1, 2, 3]);      // 自动推导为 number
const firstStr = getFirstElement<string>(["a","b","c"]); // 手动指定 string

这样返回值的类型就和传入的数组类型保持一致，既安全又灵活。

3. 泛型在数据结构中的应用

泛型的优势在于 复用性。比如我们实现一个链表结构，每个节点都可以是不同类型：

ts 复制代码

class NodeItem<T> {
  value: T;
  next: NodeItem<T> | null = null;
  constructor(value: T) {
    this.value = value;
  }
}

class LinkedList<T> {
  head: NodeItem<T> | null = null;

  append(value: T): void {
    const newNode = new NodeItem(value);
    if (!this.head) {
      this.head = newNode;
      return;
    }
    let current = this.head;
    while (current.next) {
      current = current.next;
    }
    current.next = newNode;
  }
}

使用时可以传入不同类型：

ts 复制代码

const numberList = new LinkedList<number>();
numberList.append(1);
numberList.append(2);

interface User {
  id: number;
  name: string;
}
const userList = new LinkedList<User>();
userList.append({ id: 1, name: "Alice" });
userList.append({ id: 2, name: "Bob" });

一个链表类，支持多种类型，代码复用 + 类型安全 两不误。

4. 面试中可能被问到的点

在面试中，关于泛型的问题可能会围绕以下几个方向：

基本概念：什么是泛型，为什么需要泛型。
泛型约束 ：如何用 extends 限制泛型类型，比如 T extends { id: number }。
泛型工具类型 ：如 Partial<T>、Pick<T, K> 这些都是 TS 内置的泛型工具。
在实际项目中的应用：比如封装通用组件、网络请求返回值类型、数据结构等。

5. 总结

泛型的本质：为类型提供参数化能力 ，实现 代码复用 + 类型安全。
TS 泛型在实际开发中非常常见，比如 React 组件的 Props、接口返回值、工具类型等都离不开它。
面试时别死记硬背，最好能结合实际项目场景举例，让面试官看到你真正用过。