如何为TypeScript服务/类实现Feature Flag特性开关

你当前手写全量空方法Mock类的实现，核心问题是需要和原Service类的方法、属性保持同步，服务迭代时维护成本会线性上涨，下面是几个不需要同步维护Mock代码的实现方案：

方案1：ES6 Proxy 自动生成空代理（首选，零额外维护） #

完全不需要编写Mock类，通过Proxy拦截所有对实例的方法调用、属性访问，开关关闭时直接返回空函数/默认值，原Service后续新增任何方法、属性都不需要修改开关逻辑。

// 配置文件中的特性开关，仅修改这里的布尔值即可控制服务启停
export const serviceFlag = true;

class Service {
  constructor() {
    // 原有初始化逻辑
  }

  doA() {
    // 原有业务逻辑
  }

  doB() {
    // 原有业务逻辑
  }

  // 后续新增的任意方法、属性都不需要额外适配开关逻辑
}

// 生成空代理，拦截所有实例操作
const createNullService = () => new Proxy({}, {
  get: (_, prop) => {
    // 跳过构造函数、Symbol类型内置属性
    if (prop === 'constructor' || typeof prop === 'symbol') return undefined;
    // 所有方法统一返回空函数，属性统一返回undefined，可根据业务需要调整默认返回值
    return typeof new Service()[prop] === 'function' ? () => undefined : undefined;
  }
});

export const serviceInstance = serviceFlag ? new Service() : createNullService();

• 优势：零维护成本，业务代码完全无感知，开关逻辑和业务服务完全解耦
• 适配提示：如果调用方依赖服务方法的固定格式返回值（比如数组、对象），可以在Proxy的get拦截里统一返回对应默认值，避免业务代码报错

方案2：原型遍历自动生成包装层（无Proxy兼容需求选这个） #

如果需要兼容不支持Proxy的低版本运行环境，可以在初始化时自动遍历原服务的原型方法，批量生成空实现，同样不需要手写全量Mock类：

const wrapService = (realService, enabled) => {
  if (enabled) return realService;
  const mockService = {};
  // 遍历服务原型上的所有方法
  Object.getOwnPropertyNames(Object.getPrototypeOf(realService)).forEach(prop => {
    if (prop === 'constructor') return;
    if (typeof realService[prop] === 'function') {
      mockService[prop] = () => undefined;
    }
  });
  // 如果服务有实例属性，在这里补充遍历逻辑即可
  return mockService;
};

const realService = new Service();
export const serviceInstance = wrapService(realService, serviceFlag);

• 优势：不需要Proxy语法支持，兼容所有ES5及以上环境，同样不需要手动维护Mock方法列表
• 注意：如果服务存在运行时动态挂载的方法、属性，只需要补充对应遍历逻辑即可，不需要逐个手写空实现

方案3：调用层统一拦截（适合轻量场景） #

如果服务本身方法数量不多，也可以直接在导出层做判断，不需要额外写类或者代理：

const realService = new Service();
export const serviceInstance = {
  doA: (...args) => serviceFlag ? realService.doA(...args) : undefined,
  doB: (...args) => serviceFlag ? realService.doB(...args) : undefined,
  // 后续新增方法时仅需在这里加一行映射，比维护完整Mock类成本低很多
};

扩展提示：如果后续需要支持动态开关（比如远程下发配置、运行时切换服务状态），可以把开关状态放到React Context中，通过自定义Hook返回服务实例，所有业务调用代码不需要做任何修改即可支持动态切换。

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