什么是泛型？
型（Generics）允许定义 可复用、可适应不同类型 的代码，而不需要在编写时就确定具体的类型。
基础语法
1️⃣ 定义泛型函数
function identity<T>(value: T): T {
return value;
}
identity<number>(123); // 指定 T 为 number
identity<string>("hello"); // 指定 T 为 string
```
* T是一个 类型变量，表示函数可以接收任何类型。
* identity<number>(123) 表示把 T 指定为 number。
* 如果不指定，TS 会自动 类型推断：
```
identity(true); // T 被推断为 boolean
```
### 2️⃣ 泛型接口
```
interface ApiResponse<T> {
code: number;
message: string;
data: T;
}
const res1: ApiResponse<string> = {
code: 200,
message: 'success',
data: 'Hello World'
};
const res2: ApiResponse<number[]> = {
code: 200,
message: 'success',
data: [1, 2, 3]
};
```
* ApiResponse<T> 表示 data 的类型是 泛型，可以是任何类型
### 3️⃣ 泛型类
```
class Box<T> {
content: T;
constructor(value: T) {
this.content = value;
}
}
const stringBox = new Box<string>('Hello');
const numberBox = new Box<number>(123);
```
> Box<T> 可以装任何类型的值，通过 new Box<string> 或 new Box<number> 来指定。
### 4️⃣ 泛型约束（extends）
有时候你希望泛型 必须满足某些条件，这时可以加 约束。
```
interface HasLength {
length: number;
}
function getLength<T extends HasLength>(value: T): number {
return value.length;
}
getLength('Hello'); // OK
getLength([1, 2, 3]); // OK
getLength(123); // ❌ Error: number 没有 length 属性
```
### 5️⃣ 泛型默认值
```
function getValue<T = string>(value: T): T {
return value;
}
getValue('hello'); // 推断为 string
getValue(123); // T 推断为 number
```
* 如果不传 T，默认是 string。
# 🚀 综合示例
```
type Field<T> = {
label: string;
value: T;
};
const nameField: Field<string> = { label: '姓名', value: '张三' };
const ageField: Field<number> = { label: '年龄', value: 18 };
```
## 🔥 泛型工具函数
```
function merge<T extends object, U extends object>(obj1: T, obj2: U): T & U {
return { ...obj1, ...obj2 };
}
const combined = merge({ name: '张三' }, { age: 18 }); // { name: string, age: number }
```
## 🔥 泛型 in TSX 组件
```
// GenericList.tsx
type GenericListProps<T> = {
items: T[];
renderItem: (item: T) => JSX.Element;
};
function GenericList<T>({ items, renderItem }: GenericListProps<T>) {
return <div>{items.map(renderItem)}</div>;
}
```
* 使用：
*
```
<GenericList
items={[1, 2, 3]}
renderItem={(item) => <p key={item}>{item}</p>}
/>
```
## 🧠 泛型和 React/TS 项目常见用法
| 场景 | 示例 |
| -------- | --------------------- |
| API 响应类型 | `ApiResponse<T>` |
| 通用工具函数 | `merge<T, U>()` |
| 表单字段定义 | `Field<T>` |
| 组件 props | `GenericComponent<T>` |
| 状态管理 | `useState<T>()` |
| 事件处理 | `onChange<T>()` |
## 总结一张图理解
```
function func<T>(param: T): T { ... }
↑
类型占位符，等调用时再指定具体类型
```
* T 可以是任何名字（常用 T、U、K、V）
* T 的值可以通过 调用时指定 或 TS 自动推断