ts 泛型 - 技术栈

什么是泛型？

型（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 自动推断