如何在TypeScript中实现类似Laravel Facades的静态方法代理？

你想要实现的是Laravel Facades的核心特性：通过类名直接静态调用实例方法，自动创建类实例并支持链式调用，同时避免重复编写静态和实例方法。以下是最优实现方案：

核心方案：使用Proxy拦截静态调用 #

利用ES6的Proxy特性，拦截对Route类的静态属性访问，当访问的是实例方法时，自动创建实例并调用对应方法，返回实例以支持链式调用。

步骤1：保留原Route类（仅写实例方法） #

class Route {
  method?: string;
  path?: string;
  middleware?: CallableFunction[]
 
  get(path: string) {
    this.method = 'GET'
    this.path = path
    return this;
  }

  middleware(callables: CallableFunction[]) {
    this.middleware = callables
    return this
  }
}

步骤2：创建Proxy代理Route类 #

const RouteFacade = new Proxy(Route, {
  get(target, prop) {
    // 优先返回类本身的静态属性/方法（比如构造函数、内置属性）
    if (prop in target) {
      return target[prop];
    }
    // 拦截实例方法的静态调用：创建实例并调用对应方法
    return (...args: any[]) => {
      const instance = new target();
      return instance[prop](...args);
    };
  }
});

步骤3：直接使用代理后的类 #

// 两种调用场景均支持
const route1 = RouteFacade.get('/dashboard').middleware([auth]);
const route2 = RouteFacade.middleware([auth]).get('/profile');

如果希望直接使用Route而非RouteFacade，可以直接用Proxy覆盖原类：

const Route = new Proxy(class Route {
  method?: string;
  path?: string;
  middleware?: CallableFunction[]
 
  get(path: string) {
    this.method = 'GET'
    this.path = path
    return this;
  }

  middleware(callables: CallableFunction[]) {
    this.middleware = callables
    return this
  }
}, {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    }
    return (...args: any[]) => {
      const instance = new target();
      return instance[prop](...args);
    };
  }
});

// 直接调用即可
const route1 = Route.get('/dashboard').middleware([auth]);

方案优势 #

• 完全无需重复编写静态方法，代码简洁易维护
• 完美支持任意顺序的链式调用
• 符合Laravel Facades的设计思想，逻辑清晰

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