TypeScript泛型：从入门到精通的全方位指南

TypeScript泛型：从入门到精通的全方位指南

前言

最近在社区看到很多小伙伴对TypeScript的泛型概念感到困惑。作为一名从Java转战前端的老兵，我想用最接地气的方式，带大家彻底搞懂这个看似高深实则简单的重要特性。

一、什么是泛型？

想象你有个万能收纳盒，可以装任何东西：书本、水杯、零食…泛型就像这个盒子上的标签，告诉TypeScript编译器：“我这里装的是什么东西”。

举个生活化的例子：

// 普通函数就像固定大小的鞋盒
function shoeBox(item: string): string {
  return item;
}

// 泛型函数就像可调节的伸缩鞋盒
function magicBox<T>(item: T): T {
  return item;
}

二、为什么需要泛型？

1. 避免重复代码：不用为每种类型都写一个函数
2. 保持类型安全：不像any会丢失类型检查
3. 提升代码可读性：一看就知道处理什么类型

三、基础用法详解

1. 泛型函数

// 经典identity函数
function identity<T>(arg: T): T {
  return arg;
}

// 使用方式
let output1 = identity<string>("hello"); // 显式指定
let output2 = identity(42); // 类型推断

2. 泛型接口

interface GenericBox<T> {
  contents: T;
}

let stringBox: GenericBox<string> = { contents: "surprise!" };
let numberBox: GenericBox<number> = { contents: 42 };

3. 泛型类

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myNumber = new GenericNumber<number>();
myNumber.zeroValue = 0;
myNumber.add = (x, y) => x + y;

四、进阶技巧

1. 泛型约束

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity("hello"); // OK
loggingIdentity(3); // Error: number没有length属性

2. 在React中的应用

interface Props<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: Props<T>) {
  return <div>{items.map(renderItem)}</div>;
}

// 使用
<List 
  items={[1, 2, 3]} 
  renderItem={(num) => <div key={num}>{num}</div>} 
/>;

五、常见误区

1. 过度使用any代替泛型：失去了类型安全的优势
2. 滥用复杂泛型：简单场景不需要多层嵌套
3. 忽略类型推断：很多时候不需要显式指定类型

六、实战案例

1. API响应处理

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

async function fetchUser(): Promise<ApiResponse<User>> {
  const response = await fetch(/api/user);
  return response.json();
}

2. 工具函数封装

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

const nums = [1, 2, 3];
const firstNum = firstElement(nums); // 类型推断为number

const strs = ["a", "b"];
const firstStr = firstElement(strs); // 类型推断为string

结语

泛型就像TypeScript给我们的魔法工具箱，刚开始可能觉得复杂，但一旦掌握就能写出既灵活又安全的代码。建议从简单场景开始练习，逐步应用到实际项目中。

你在使用泛型时遇到过哪些有趣的问题？欢迎在评论区分享你的经验！