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

针对你要拆分庞大API类的需求，以下几种方案可以实现按功能模块拆分文件，同时保持原有调用方式不变：

方案一：TypeScript 混入（Mixin） #

这是TS官方支持的类组合方式，能将多个功能模块的方法合并到主类中，类型支持完整。

1. 拆分功能模块文件 #

每个模块定义一个混入函数，返回包含对应方法的类：

// loginAPI.ts
export function LoginMixin<T extends new (...args: any[]) => {}>(Base: T) {
  return class extends Base {
    doLogin() {
      // 可通过this访问主类的axios和通用方法
      console.log('执行登录逻辑');
      return this.makeAxiosRequest({ url: '/login', method: 'post' });
    }

    doAdminLogin() {
      console.log('执行管理员登录');
    }

    doMemberLogin() {
      console.log('执行会员登录');
    }
  };
}

// userAPI.ts
export function UserMixin<T extends new (...args: any[]) => {}>(Base: T) {
  return class extends Base {
    addAnUser(userName: string) {
      console.log(`添加用户：${userName}`);
      return this.makeAxiosRequest({ url: '/users', method: 'post', data: { userName } });
    }

    deleteAnUser(userName: string) {
      console.log(`删除用户：${userName}`);
      return this.makeAxiosRequest({ url: `/users/${userName}`, method: 'delete' });
    }

    updateUser(userName: string, data: Partial<{nickname: string; age: number}>) {
      console.log(`更新用户信息：${userName}`);
      return this.makeAxiosRequest({ url: `/users/${userName}`, method: 'put', data });
    }
  };
}

// purchaseAPI.ts
export function PurchaseMixin<T extends new (...args: any[]) => {}>(Base: T) {
  return class extends Base {
    addToCart(productId: string) {
      console.log(`添加商品${productId}到购物车`);
      return this.makeAxiosRequest({ url: '/cart', method: 'post', data: { productId } });
    }

    buyProduct(productId: string) {
      console.log(`购买商品${productId}`);
      return this.makeAxiosRequest({ url: '/order', method: 'post', data: { productId } });
    }

    cancelOrder(orderId: string) {
      console.log(`取消订单${orderId}`);
      return this.makeAxiosRequest({ url: `/order/${orderId}`, method: 'delete' });
    }
  };
}

2. 主类组合所有混入 #

在mainAPI.ts中定义基础类，通过混入组合所有功能模块：

// mainAPI.ts
import axios from 'axios';
import { LoginMixin } from './loginAPI';
import { UserMixin } from './userAPI';
import { PurchaseMixin } from './purchaseAPI';

// 基础类：存放通用方法和共享资源
class BaseAPI {
  protected axios = axios;

  makeAxiosRequest(config: any) {
    return this.axios(config);
  }
}

// 组合所有混入，生成最终的API类
export class API extends PurchaseMixin(UserMixin(LoginMixin(BaseAPI))) {}

3. 调用方式（与原有代码完全一致） #

// testFile.ts
import { API } from './mainAPI';

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

方案二：原型注入（快速迁移现有代码） #

如果不想修改类的继承链，可直接将模块方法挂载到主类的原型上，适合原有大文件的逐步拆分。

1. 拆分功能模块文件 #

每个模块定义挂载方法的函数：

// loginAPI.ts
export function attachLoginMethods(API: any) {
  API.prototype.doLogin = function() {
    console.log('执行登录');
    return this.makeAxiosRequest({ url: '/login', method: 'post' });
  };

  API.prototype.doAdminLogin = function() {
    console.log('管理员登录');
  };
}

（userAPI.ts和purchaseAPI.ts类似，定义attachUserMethods、attachPurchaseMethods函数）

2. 主类挂载方法 #

// mainAPI.ts
import axios from 'axios';
import { attachLoginMethods } from './loginAPI';
import { attachUserMethods } from './userAPI';
import { attachPurchaseMethods } from './purchaseAPI';

export class API {
  protected axios = axios;

  makeAxiosRequest(config: any) {
    return this.axios(config);
  }
}

// 挂载所有模块方法到API类原型
attachLoginMethods(API);
attachUserMethods(API);
attachPurchaseMethods(API);

// 声明扩展方法的类型，让TS提供类型提示
interface API {
  doLogin(): Promise<any>;
  doAdminLogin(): void;
  addAnUser(userName: string): Promise<any>;
  deleteAnUser(userName: string): Promise<any>;
  addToCart(productId: string): Promise<any>;
  // 其他方法...
}

3. 调用方式不变 #

和原有测试代码完全一致，无需修改。

方案三：组合模式（职责更清晰） #

如果可以接受调用方式的微小调整，这种方式能让每个模块完全独立，符合单一职责原则：

1. 拆分功能模块类 #

每个模块定义独立的类，接收共享资源（如axios）：

// loginAPI.ts
import axios from 'axios';

export class LoginAPI {
  constructor(private axios: typeof axios) {}

  doLogin() {
    return this.axios.post('/login');
  }
}

（userAPI.ts和purchaseAPI.ts同理，定义UserAPI、PurchaseAPI类）

2. 主类聚合模块实例 #

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

export class API {
  public login = new LoginAPI(axios);
  public user = new UserAPI(axios);
  public purchase = new PurchaseAPI(axios);

  makeAxiosRequest(config: any) {
    return axios(config);
  }
}

3. 调用方式 #

// testFile.ts
import { API } from './mainAPI';

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

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