泛型通用函数

泛型通用函数是TypeScript中通过类型参数构建的可复用函数，它把类型也当作入参来处理，让同一个函数在不同类型下保持类型安全。核心价值一句话概括：先写逻辑，后定类型，调用时再决定具体类型。

很多前端开发者对泛型的第一印象是“看不懂的尖括号”，但真正在项目里被复杂类型逼到墙角时，才会发现泛型通用函数是那根救命稻草，它不是语法糖，而是一种让你把“类型”本身当作变量来操作的设计思路,下面直接拆开讲清楚。

加载中

为什么要用泛型？ | 泛型方法、通配符该如何使用 | Java中的泛型知识

御风大世界

6.4万153649

原视频地址

typescript泛型函数是什么？先搞懂三个核心概念

要理解泛型通用函数，不能只看定义，得从它解决问题的路径入手，我们可以把普通函数想象成一台只收特定尺寸零件的机床，而泛型函数是一台带可调节卡爪的机床你告诉它今天要加工多大的零件,它就把卡爪调到那个尺寸。

类型参数：函数签名里的“占位符”

泛型函数的核心标志是函数名后面跟的<T>，这个T不是具体类型，而是一个类型参数，代表“调用时由外部传入的类型”。

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

T在这里就是占位符，调用firstElement<number>([1,2,3])时，T被替换为number，返回值类型就自动推断为number | undefined，如果不传<number>，TypeScript也会根据实参自动推断出T。

类型推断：不写尖括号也能享受类型保护

泛型最容易被忽略的能力是自动推断，多数情况下,你不需要显式写出类型参数。

function identity<T>(arg: T): T {
  return arg;
}
let result = identity("hello"); // result 类型自动为 string

行业共识认为，泛型推断的智能程度是衡量一个开发者是否真正理解类型系统的重要标尺，它让代码看起来和普通JavaScript几乎一样,但类型安全一点没少。

类型约束：给泛型套上缰绳

泛型不是无限自由的，通过extends关键字，你可以限制T必须具备某些属性：

interface HasLength {
  length: number;
}
function logLength<T extends HasLength>(arg: T): T {
  console.log(arg.length);
  return arg;
}

这里T被约束为必须具有length属性，传入数字会直接报错，业内专家指出，学会用extends约束泛型，是泛型函数从“能用”走向“好用”的分水岭。

泛型函数和普通函数区别在哪？从五个场景看选择逻辑

很多开发者纠结：什么时候用泛型？什么时候直接写普通函数？答案不复杂，看你的函数是否需要“保持输入与输出类型之间的关联”。

返回类型依赖入参类型

普通函数做不到这一点，比如你想写一个函数，接收一个属性名,返回对象中该属性的值：

// 普通函数：返回 any，丢失类型
function getProp(obj: any, key: string) {
  return obj[key];
}
// 泛型函数：返回类型精准关联
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

后者能让你在写obj[key]时获得完整的类型提示和检查，这就是泛型函数和普通函数区别的核心类型关联性。

数组或集合的元素类型操作

处理数组时，泛型几乎不可替代,比如实现一个数组去重函数：

function unique<T>(arr: T[]): T[] {
  return Array.from(new Set(arr));
}
let nums = unique([1, 2, 2, 3]); // number[]
let strs = unique(["a", "a", "b"]); // string[]

同一个函数，两种不同类型，全部获享类型安全，普通函数签名的写法会迫使你写any或重载多个版本。

类与工厂函数

泛型同样适用于类和构造函数,写一个通用的状态管理器：

class Store<T> {
  private state: T;
  constructor(initial: T) {
    this.state = initial;
  }
  getState(): T {
    return this.state;
  }
  setState(next: T): void {
    this.state = next;
  }
}

函数组合与管道

在函数式编程中，泛型让组合更安全,比如一个简单的管道函数：

function pipe<A, B, C>(f: (a: A) => B, g: (b: B) => C): (a: A) => C {
  return (x) => g(f(x));
}

工具类型的实现

TypeScript内置的Partial<T>、Record<K, V>等工具类型，本质就是泛型通用函数在类型层面的应用，你写类型工具时，实际上是在写一套“类型的函数”。

泛型函数怎么用？从零到一实现一个通用请求封装

理论知识说再多，不如动手写一个真实场景,前端项目里最常见的泛型需求就是统一封装API请求。

第一步：定义基础响应结构

假设后端返回的数据格式统一为{ code: number, data: T, message: string },我们可以定义一个泛型接口：

interface ApiResponse<T> {
  code: number;
  data: T;
  message: string;
}

第二步：封装请求函数

async function fetchApi<T>(url: string, options?: RequestInit): Promise<T> {
  const response = await fetch(url, options);
  const result: ApiResponse<T> = await response.json();
  if (result.code !== 0) {
    throw new Error(result.message);
  }
  return result.data;
}

调用时,你只需要指定期望的数据类型：

interface User {
  id: number;
  name: string;
}
const user = await fetchApi<User>('/api/user/1');
// user 的类型自动为 User，无需手动断言

第三步：配合泛型约束处理复杂场景

更进一步，当接口需要分页参数时,可以定义一个通用的分页请求函数：

interface PaginatedResult<T> {
  list: T[];
  total: number;
  page: number;
  pageSize: number;
}
async function fetchPage<T>(page: number, pageSize: number, url: string): Promise<PaginatedResult<T>> {
  const data = await fetchApi<PaginatedResult<T>>(`${url}?page=${page}&pageSize=${pageSize}`);
  return data;
}

这个封装在多个项目中复用起来非常顺滑，泛型让你只写一次类型逻辑,就能覆盖所有接口。

泛型函数类型推断不够用怎么办？约束与默认类型实战

TypeScript的自动推断达不到预期，或者你希望给泛型一个默认值,这就需要手动干预。

使用默认类型参数：给泛型一个后备方案

function createArray<T = string>(length: number, value: T): T[] {
  return new Array(length).fill(value);
}
let arr1 = createArray(3, "hello"); // string[]
let arr2 = createArray<number>(3, 42); // number[]

默认类型让调用方可以省略类型参数,同时保持类型安全。

多类型参数的推断顺序

当泛型有多个参数时，推断顺序有讲究，前面的参数优先被推断,后面的参数可以依赖前面的类型：

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}
let result = pair("name", 123); // [string, number] 自动推断

泛型递归：处理树形结构

泛型函数也可以递归，处理嵌套的树形菜单时,定义一个递归泛型类型：

interface TreeNode<T> {
  value: T;
  children?: TreeNode<T>[];
}
function mapTree<T, U>(node: TreeNode<T>, fn: (value: T) => U): TreeNode<U> {
  return {
    value: fn(node.value),
    children: node.children?.map(child => mapTree(child, fn)),
  };
}

这种写法在复杂数据转换场景中非常实用，类型推断完全自动,无需手动标注。

常见问题：泛型函数报错、any滥用与性能顾虑

泛型函数和any到底有什么不同？

这是面试中常见的问题。any是完全关闭类型检查，相当于把类型安全带剪断；泛型保留类型关系，只是把具体类型延迟到调用时确定，用一个比喻：any是“你随便点菜，我端上来什么就是什么”，泛型是“你先告诉我点什么菜，我按那个菜给你做”。

泛型会不会影响运行时性能？

不会。泛型是纯类型层面的机制，编译成JavaScript后完全消失，不产生任何运行时开销，过度复杂的泛型签名会增加编译器的类型检查耗时，在大型项目中可能导致编辑器的智能提示变慢，但这是开发者体验问题,不是运行时性能问题。

泛型约束中的keyof怎么理解？

keyof获取一个类型的所有属性名组成的联合类型。

type User = { id: number; name: string };
type UserKeys = keyof User; // "id" | "name"

结合泛型约束，可以写出非常安全的属性访问函数，这是类型的“双重保险”。

泛型通用函数在项目中的定位

泛型通用函数不是银弹，但它解决了前端工程中一个核心矛盾：类型安全与代码复用之间的平衡，当你发现自己重复写多个结构相似但类型不同的函数时，就该考虑泛型了，当你发现自己用any逃避类型检查时,不妨回头看看泛型能不能接手。

记住一个简单的判断标准：如果函数逻辑与具体类型无关，但你又希望保留类型信息，那就是泛型的主场。它不是让你多学一个概念,而是让你少写一堆重复代码。

泛型函数常见问题Q&A

泛型函数可以用于类吗？

可以，泛型类适合那些内部状态类型不确定、但需要保持一致性的场景，比如数据结构容器（栈、队列、缓存），在类名后加<T>即可,整个类都能使用这个类型参数。

泛型函数的类型参数可以有几个？

没有数量限制，多个类型参数用于关联多个不同数据的类型，比如一个函数接收两个不同类型参数并返回对象，用<T, U>就能同时保留两个类型，实际项目中,超过三个类型参数时建议考虑是否拆分函数。

泛型函数能配合装饰器使用吗？

在TypeScript中，泛型类和泛型函数都可以应用于装饰器模式，泛型常用于实现依赖注入容器，让被注入的服务实例保持精确类型，这在NestJS这类框架的源码中随处可见，装饰器本身是运行时机制，泛型是编译时机制，两者各司其职、互不干扰。