如何将大型TypeScript API类按页面对象结构拆分到多文件？

下面提供两种符合你需求的实现方式，其中混入方案能让拆分后的方法直接成为主类的一部分，完全匹配你的期望结构。

方案一：使用TypeScript混入（Mixins） #

这种方式可以将多个模块类的方法合并到主API类中，调用方式和原来完全一致。

1. 拆分各功能模块文件 #

loginAPI.ts

export class LoginAPI {
  doLogin() {
    // 登录逻辑，可直接调用主类的makeAxiosRequest方法
    return this.makeAxiosRequest({
      method: 'POST',
      url: '/login'
      // 其他登录参数
    });
  }

  doAdminLogin() {
    // 管理员登录逻辑实现
  }

  doMemberLogin() {
    // 会员登录逻辑实现
  }

  getJSESSIONID() {
    // 获取JSESSIONID逻辑实现
  }

  getLoginResponse() {
    // 获取登录响应逻辑实现
  }
}

userAPI.ts

export class UserAPI {
  addAnUser(userName: string) {
    return this.makeAxiosRequest({
      method: 'POST',
      url: '/users',
      data: { userName }
    });
  }

  deleteAnUser(userName: string) {
    // 删除用户逻辑实现
  }

  updateUser(userName: string, updateData: Record<string, any>) {
    // 更新用户逻辑实现
  }
}

purchaseAPI.ts

export class PurchaseAPI {
  addToCart(productId: string) {
    // 加入购物车逻辑实现
  }

  buyProduct(productId: string) {
    // 购买商品逻辑实现
  }

  cancelOrder(orderId: string) {
    // 取消订单逻辑实现
  }
}

2. 主API类整合 #

mainAPI.ts

import axios from 'axios';
import { LoginAPI } from './loginAPI';
import { UserAPI } from './userAPI';
import { PurchaseAPI } from './purchaseAPI';

// 混入工具函数：将基础类的原型方法复制到目标类
function applyMixins(targetClass: any, baseClasses: any[]) {
  baseClasses.forEach(baseClass => {
    Object.getOwnPropertyNames(baseClass.prototype).forEach(methodName => {
      targetClass.prototype[methodName] = baseClass.prototype[methodName];
    });
  });
}

export class API {
  private axiosInstance = axios.create({
    baseURL: '你的API基础地址' // 替换为实际地址
  });

  makeAxiosRequest(config: any) {
    // 统一的请求处理逻辑
    return this.axiosInstance(config);
  }
}

// 将各模块类的方法混入到API类
applyMixins(API, [LoginAPI, UserAPI, PurchaseAPI]);

3. 调用方式（完全兼容原有代码） #

testFile.ts

import { API } from './mainAPI';

const api = new API();
await api.doLogin();
await api.addAnUser('test_user');
await api.buyProduct('prod_001');

方案二：使用类的组合（Composition） #

如果希望各模块保持独立，可采用组合方式，主类持有各模块实例，适合模块间耦合度较低的场景。

1. 调整模块类（接收axios实例） #

loginAPI.ts

import { AxiosInstance } from 'axios';

export class LoginAPI {
  constructor(private axiosInstance: AxiosInstance) {}

  doLogin() {
    return this.axiosInstance({ url: '/login', method: 'POST' });
  }
  // 其他登录相关方法...
}

2. 主API类整合 #

mainAPI.ts

import axios from 'axios';
import { LoginAPI } from './loginAPI';
import { UserAPI } from './userAPI';
import { PurchaseAPI } from './purchaseAPI';

export class API {
  public login: LoginAPI;
  public user: UserAPI;
  public purchase: PurchaseAPI;

  private axiosInstance = axios.create({ baseURL: '你的API基础地址' });

  constructor() {
    this.login = new LoginAPI(this.axiosInstance);
    this.user = new UserAPI(this.axiosInstance);
    this.purchase = new PurchaseAPI(this.axiosInstance);
  }
}

3. 调用方式 #

import { API } from './mainAPI';

const api = new API();
await api.login.doLogin();
await api.user.addAnUser('test_user');
await api.purchase.buyProduct('prod_001');

注意事项 #

• 混入方案需确保各模块类的方法名不冲突，否则后混入的方法会覆盖先混入的。
• 组合方案更符合单一职责原则，每个模块专注自身功能，主类仅负责整合。

内容的提问来源于stack exchange，提问作者mark_Ruff