从"万能函数"到"精准工具"：泛型如何消除重复代码

海在掘金611272025-10-23 15:24

真实场景：重复代码的泥潭

在我之前参与的一个内容管理系统中，团队遇到了这样一个令人头疼的问题：

javascript 复制代码 
// ❌ JS中的重复代码
function processUserData(user) {
  return {
    id: user.id,
    name: user.name,
    processedAt: new Date(),
    type: 'user'
  };
}

function processArticleData(article) {
  return {
    id: article.id,
    title: article.title,
    processedAt: new Date(),
    type: 'article'
  };
}

function processCommentData(comment) {
  return {
    id: comment.id,
    content: comment.content,
    processedAt: new Date(),
    type: 'comment'
  };
}

// 每个新数据类型都需要新增一个几乎相同的函数
function processProductData(product) {
  return {
    id: product.id,
    name: product.name,
    processedAt: new Date(),
    type: 'product'
  };
}

这种重复模式带来了严重的问题：

  • 维护困难：修改处理逻辑需要在多个函数中重复修改
  • 容易出错：可能在某些函数中忘记添加必要的字段
  • 代码膨胀：每增加一个数据类型，代码量就线性增长

问题根源：缺乏抽象思维

JavaScript的动态类型特性让我们习惯于为每个具体场景编写具体函数：

  • 复制粘贴开发：找到相似函数，复制修改
  • 缺乏抽象：看不到模式背后的通用逻辑
  • 类型恐惧：担心通用函数会失去类型安全

TypeScript泛型的救赎：一次定义，多种使用

解决方案1：基础泛型接口

typescript 复制代码 
// ✅ 泛型解决方案：定义一次，处处使用
interface IProcessedData<T> {
  id: number;
  data: T;
  processedAt: Date;
  type: string;
}

// 通用的处理函数
function processData<T>(item: T, type: string): IProcessedData<T> {
  return {
    id: Math.random(), // 实际中可能是数据库ID
    data: item,
    processedAt: new Date(),
    type: type
  };
}

// 使用示例 - 类型安全且无重复
const user = { id: 1, name: '张三', email: 'zhang@example.com' };
const article = { id: 2, title: 'TypeScript教程', content: '...' };
const comment = { id: 3, content: '很好的文章', authorId: 1 };

const processedUser = processData(user, 'user');
const processedArticle = processData(article, 'article');
const processedComment = processData(comment, 'comment');

// 完全类型安全！
console.log(processedUser.data.name);    // ✅ 知道这是string
console.log(processedArticle.data.title); // ✅ 知道这是string
console.log(processedComment.data.authorId); // ✅ 知道这是number

解决方案2：带约束的泛型

typescript 复制代码 
// 确保泛型类型具有必要的属性
interface Identifiable {
  id: number;
  name: string;
}

// 泛型约束：T必须满足Identifiable接口
function createResource<T extends Identifiable>(item: T) {
  return {
    ...item,
    url: `/api/${item.id}`,
    createdAt: new Date(),
    // 因为T extends Identifiable，我们知道item一定有id和name
    displayName: `${item.name} (#${item.id})`
  };
}

// 使用
const userResource = createResource({ 
  id: 1, 
  name: '张三',
  email: 'zhang@example.com' // 可以添加额外属性
});

const productResource = createResource({
  id: 2,
  name: '笔记本电脑',
  price: 5999
});

// 🚨 编译错误：缺少name属性
const invalidResource = createResource({ id: 3 });

解决方案3：泛型在API响应中的应用

typescript 复制代码 
// 通用的API响应类型
interface IApiResponse<T> {
  success: boolean;
  data: T;
  message?: string;
  code: number;
}

// 分页响应类型
interface IPaginatedResponse<T> {
  items: T[];
  total: number;
  page: number;
  pageSize: number;
  totalPages: number;
}

// 通用的API客户端
class ApiClient {
  async get<T>(url: string): Promise<IApiResponse<T>> {
    const response = await fetch(url);
    return response.json();
  }
  
  async getPaginated<T>(url: string, page: number = 1): Promise<IApiResponse<IPaginatedResponse<T>>> {
    const response = await fetch(`${url}?page=${page}`);
    return response.json();
  }
}

// 使用 - 一套代码，多种数据类型
const apiClient = new ApiClient();

// 获取用户列表
const usersResponse = await apiClient.getPaginated<IUser>('/api/users');
console.log(usersResponse.data.items[0].email); // ✅ 类型安全

// 获取文章列表
const articlesResponse = await apiClient.getPaginated<IArticle>('/api/articles');
console.log(articlesResponse.data.items[0].title); // ✅ 类型安全

// 获取单个产品
const productResponse = await apiClient.get<IProduct>('/api/products/1');
console.log(productResponse.data.price); // ✅ 类型安全

实际案例：表单系统的泛型改造

Before: 重复的表单处理

javascript 复制代码 
// ❌ 重复的表单验证函数
function validateUserForm(formData) {
  const errors = {};
  if (!formData.name) errors.name = '姓名不能为空';
  if (!formData.email) errors.email = '邮箱不能为空';
  if (!formData.password) errors.password = '密码不能为空';
  return errors;
}

function validateArticleForm(formData) {
  const errors = {};
  if (!formData.title) errors.title = '标题不能为空';
  if (!formData.content) errors.content = '内容不能为空';
  if (!formData.category) errors.category = '分类不能为空';
  return errors;
}

function validateProductForm(formData) {
  const errors = {};
  if (!formData.name) errors.name = '产品名称不能为空';
  if (!formData.price) errors.price = '价格不能为空';
  if (!formData.stock) errors.stock = '库存不能为空';
  return errors;
}

After: 泛型表单解决方案

typescript 复制代码 
// ✅ 泛型表单系统
interface IFormField<T> {
  value: T;
  required?: boolean;
  validator?: (value: T) => string | null;
}

interface IFormSchema {
  [key: string]: IFormField<any>;
}

// 通用的表单验证函数
function validateForm<T extends IFormSchema>(formData: T): Record<keyof T, string> {
  const errors = {} as Record<keyof T, string>;
  
  for (const [key, field] of Object.entries(formData)) {
    if (field.required && !field.value) {
      errors[key as keyof T] = `${key}不能为空`;
      continue;
    }
    
    if (field.validator && field.value) {
      const error = field.validator(field.value);
      if (error) {
        errors[key as keyof T] = error;
      }
    }
  }
  
  return errors;
}

// 使用示例
const userForm = {
  name: { value: '张三', required: true },
  email: { 
    value: 'zhang@example.com', 
    required: true,
    validator: (email: string) => 
      !email.includes('@') ? '邮箱格式不正确' : null
  },
  age: {
    value: 25,
    validator: (age: number) => 
      age < 0 ? '年龄不能为负数' : null
  }
};

const errors = validateForm(userForm);
// errors的类型是 { name: string; email: string; age: string }

核心价值对比

维度 重复函数方式 泛型方式
代码量 每新增类型增加10-20行 新增类型只需1行调用
维护成本 修改逻辑需要更新多个地方 只需修改泛型函数
类型安全 每个函数需要单独类型定义 一次定义，自动推导
可扩展性 需要预见所有用例 轻松支持新数据类型

实际效果展示

Before: 维护噩梦

javascript 复制代码 
// 添加新数据类型时...
function processCategoryData(category) {
  return {
    id: category.id,
    name: category.name,
    processedAt: new Date(),
    type: 'category'
    // 可能忘记添加必要的字段...
  };
}

// 修改逻辑时...
// 需要在processUserData、processArticleData、processCommentData...
// processProductData、processCategoryData中分别修改

After: 优雅简洁

typescript 复制代码 
// 添加新数据类型
const category = { id: 1, name: '技术', description: '...' };
const processedCategory = processData(category, 'category');

// 修改逻辑时...
// 只需修改processData一个函数
function processData<T>(item: T, type: string): IProcessedData<T> {
  return {
    id: generateId(), // 统一修改ID生成逻辑
    data: item,
    processedAt: new Date(),
    type: type,
    version: '1.0' // 统一添加版本字段
  };
}

泛型设计心法

木之结构：建立类型层次

1. 从具体到抽象

typescript 复制代码 
// 先写几个具体的函数，发现模式
function processUser(user: IUser) { /* ... */ }
function processArticle(article: IArticle) { /* ... */ }

// 提取共性，创建泛型
function processEntity<T>(entity: T) { /* ... */ }

2. 渐进式约束

typescript 复制代码 
// 开始宽松
function process1<T>(item: T) { /* ... */ }

// 逐步添加约束
function process2<T extends { id: number }>(item: T) { /* ... */ }

// 最终精确约束
function process3<T extends Identifiable & Timestamped>(item: T) { /* ... */ }

火之创造：泛型的创造性应用

高级泛型模式

typescript 复制代码 
// 条件类型
type ApiResponse<T> = T extends Array<any> 
  ? IPaginatedResponse<T[0]>
  : ISingleResponse<T>;

// 映射类型
type OptionalFields<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

// 递归类型
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

金之约束：编译时类型安全

泛型保证的一致性

typescript 复制代码 
// 编译器确保所有使用处类型正确
function createApiEndpoint<T>(path: string) {
  return {
    get: (id: number): Promise<T> => fetch(`${path}/${id}`),
    list: (): Promise<T[]> => fetch(path),
    create: (data: Omit<T, 'id'>): Promise<T> => fetch(path, { method: 'POST', body: JSON.stringify(data) })
  };
}

const userApi = createApiEndpoint<IUser>('/users');
const articleApi = createApiEndpoint<IArticle>('/articles');

// 类型安全的使用
const user = await userApi.get(1);     // IUser类型
const articles = await articleApi.list(); // IArticle[]类型

从重复到抽象：我的思维转变

在使用泛型之前：

  • 思维模式：看到需求 → 编写具体函数 → 遇到相似需求 → 复制粘贴修改
  • 代码质量：重复代码多，维护成本高
  • 重构恐惧：不敢修改通用逻辑，怕遗漏某个具体函数

使用泛型之后：

  • 思维模式：看到需求 → 分析模式 → 设计泛型方案 → 轻松支持所有类似场景
  • 代码质量：简洁优雅，易于维护
  • 重构自信：修改核心逻辑，编译器保证所有使用处同步更新

开始你的泛型之旅

如果你也厌倦了无尽的复制粘贴，不妨从今天开始：

  1. 识别重复模式：在代码中寻找相似的函数
  2. 设计基础泛型：从最简单的泛型函数开始
  3. 逐步添加约束：根据需要逐步完善类型约束
  4. 享受代码复用：感受"一次编写，多处使用"的愉悦

记住：泛型不是高级技巧，而是日常工具。就像你不会为每个尺寸的螺丝准备不同的螺丝刀一样，也不应该为每个数据类型编写单独的处理函数。

进阶技巧：工具类型组合

typescript 复制代码 
// 组合工具类型创建强大的泛型
type ApiMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

type ApiHandler<T, M extends ApiMethod> = 
  M extends 'GET' ? () => Promise<T[]> :
  M extends 'POST' ? (data: Omit<T, 'id'>) => Promise<T> :
  M extends 'PUT' ? (id: number, data: Partial<T>) => Promise<T> :
  (id: number) => Promise<void>;

// 使用
type UserHandler = ApiHandler<IUser, 'POST'>; // (data: Omit<IUser, 'id'>) => Promise<IUser>

抽象思维，从泛型开始。告别重复代码，迎接"一次定义，多种使用"的开发体验。

开始用泛型思维重新审视你的代码吧！你会发现，很多重复工作本不应该存在。

相关推荐
云心雨禅5 小时前
DNS工作原理：从域名到IP
运维·前端·网络协议·tcp/ip·github
Dorian_Ov05 小时前
Mybatis操作postgresql的postgis的一些总结
前端·gis
Moshow郑锴6 小时前
从 “瞎埋点” 到 “精准分析”：WebTagging 设计 + 页面埋点指南（附避坑清单）
前端
非凡ghost6 小时前
PixPin截图工具(支持截长图截动图) 中文绿色版
前端·javascript·后端
૮・ﻌ・6 小时前
Vue2（一）：创建实例、插值表达式、Vue响应式特性、Vue指令、指令修饰符、计算属性
前端·javascript·vue.js
半生过往7 小时前
2025 前端动效实战指南：Vue Bits & React Bits 深度拆解（功能 / 复用 / 高频问题处理）
前端·vue.js·react.js
程序员包打听7 小时前
Vitest 4.0 重磅发布：Browser Mode 正式稳定，前端测试进入新纪元
前端
BumBle7 小时前
UniApp 多页面编译优化：编译时间从10分钟到1分钟
前端
星链引擎7 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）082025软件测试面试八股文（含答案+文档）09Labelme从安装到标注：零基础完整指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示