TypeScript泛型实战：从基础到企业级应用

1. TypeScript 泛型深度解析：从基础到企业级实践

作为一名长期奋战在前端工程化一线的开发者，我深刻体会到TypeScript泛型在大型项目中的价值。泛型不是炫技工具，而是解决类型复用难题的利器。记得在去年重构公司核心业务模块时，泛型帮助我们减少了40%的类型声明代码量，同时显著提升了类型安全性。

1.1 为什么需要泛型？

想象你正在开发一个电商平台，需要处理三种数据类型：

• 用户数据：{id: number, name: string}
• 商品数据：{sku: string, price: number}
• 订单数据：{orderId: string, items: [...]}

如果没有泛型，我们要么为每种类型重复编写相似逻辑，要么使用any放弃类型检查。这两种方案在长期维护中都会成为噩梦。

typescript复制// 反例1：类型重复
function getUserFirst(user: User[]): User {
  return user[0]
}

function getProductFirst(product: Product[]): Product {
  return product[0]
}

// 反例2：使用any失去类型安全
function getFirst(arr: any[]): any {
  return arr[0]
}

泛型提供了第三种选择——类型参数化：

typescript复制// 正例：使用泛型
function getFirst<T>(arr: T[]): T {
  return arr[0]
}

const user = getFirst<User>(users) // 类型为User
const product = getFirst<Product>(products) // 类型为Product

2. 泛型四大应用场景实战指南

2.1 泛型函数：日常开发的主力军

在企业项目中，泛型函数最常见的场景是API请求封装。我们来看一个axios封装示例：

typescript复制// 基础封装
async function request<T>(config: {
  url: string
  method?: 'GET' | 'POST'
  data?: unknown
}): Promise<T> {
  const response = await axios(config)
  return response.data as T
}

// 使用示例
interface User {
  id: number
  name: string
}

const user = await request<User>({
  url: '/api/user/1'
})
// user类型自动推断为User

高级技巧：我们可以通过泛型约束来确保返回数据结构：

typescript复制interface BaseResponse<T> {
  code: number
  message: string
  data: T
}

async function request<T>(config: {
  url: string
}): Promise<BaseResponse<T>> {
  const response = await axios(config)
  return response.data
}

// 使用时自动获得完整类型提示
const result = await request<User[]>('/api/users')
// result类型为 BaseResponse<User[]>

2.2 泛型接口：构建灵活的类型契约

在前后端协作中，泛型接口能极大提升接口定义的灵活性。以下是几种常见模式：

模式1：分页数据规范

typescript复制interface Pagination<T> {
  current: number
  pageSize: number
  total: number
  list: T[]
}

// 用户分页
type UserPagination = Pagination<User>
// 商品分页
type ProductPagination = Pagination<Product>

模式2：API响应标准化

typescript复制interface APIResponse<T = any> {
  success: boolean
  code: string
  data: T
  timestamp: number
}

// 登录接口响应
interface LoginData {
  token: string
  expiresIn: number
}

const loginRes: APIResponse