为何通过装饰器添加的方法无法访问？附Angular装饰器代码示例

问题分析 #

你遇到的问题核心在于装饰器的实现逻辑和TypeScript类型系统对静态成员的处理规则不匹配：你通过类装饰器返回了一个继承原类的子类，并在子类上添加了静态factory方法，但TypeScript默认不会自动将子类的静态成员合并到原类的类型定义中；同时你定义的BaseDirective是实例接口，无法覆盖类的静态成员类型，导致既无法在代码中正常访问该方法，也得不到类型提示。

根本原因 #

1. 装饰器返回子类的局限性：当类装饰器返回新子类时，虽然运行时原类变量会被替换为这个子类，但TypeScript的类型推断不会自动将子类的静态成员同步到原类的类型上，导致类型检查认为原类没有factory方法。
2. 接口定义范围错误：BaseDirective作为ng.IDirective的扩展，描述的是类实例的成员，而factory是静态方法（属于类本身），所以这个接口无法为静态方法提供类型支持。

解决方案 #

我们可以从调整装饰器实现、补充正确类型定义两个维度来修正：

1. 修正装饰器：直接在原构造函数上挂载静态方法

不需要返回子类，直接给原构造函数添加factory静态方法，这样运行时和类型系统都能正确识别：

function Directive<T extends { new (...args: any[]): {} }>(constructor: T) {
  // 直接给原构造函数绑定静态factory方法
  constructor.factory = function(...args): ng.IDirectiveFactory {
    // 简化实现：IDirectiveFactory本质就是返回指令实例的函数
    return () => new constructor(...args);
  };
  return constructor;
}

2. 补充静态方法的类型定义

通过定义静态接口，并让装饰器返回的构造函数带上该接口类型，让TypeScript识别静态方法：

// 定义静态方法的类型接口
interface DirectiveStatic {
  factory(...args: any[]): ng.IDirectiveFactory;
}

// 调整装饰器返回类型，合并原构造函数类型与静态接口
function Directive<T extends { new (...args: any[]): {} }>(constructor: T): T & DirectiveStatic {
  constructor.factory = function(...args): ng.IDirectiveFactory {
    return () => new constructor(...args);
  };
  return constructor as T & DirectiveStatic;
}

3. 正常使用装饰器

现在你可以直接访问静态factory方法，同时获得完整的类型提示：

@Directive
class MyDirective implements ng.IDirective {
  restrict = 'E';
  link(scope: ng.IScope, element: ng.IAugmentedJQuery) {
    // 指令业务逻辑
  }
}

// 类型检查通过，可正常调用静态factory方法
const directiveFactory = MyDirective.factory();

额外优化说明 #

你原来的factory方法实现存在冗余：ng.IDirectiveFactory本身就是一个返回ng.IDirective实例的函数，所以直接返回() => new constructor(...args)就完全满足需求，不需要额外的函数包装和原型赋值逻辑。

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