TypeScript动态添加属性装饰器方法

本文揭秘了如何突破 TypeScript 装饰器只能在编译时静态声明的限制，通过直接调用底层 `__decorate` 辅助函数，将自定义属性装饰器动态注入到无法修改的第三方类（如外部包中的 `class A`）上——无需源码权限、不依赖反射元数据支持，仅凭运行时对原型和属性描述符的精准操作，就能实现真正的“热插拔”式功能增强，为框架集成、调试工具开发和遗留系统改造提供了轻量、可靠且高度可控的解决方案。

本文详解如何绕过 TypeScript 装饰器的编译时限制，通过手动调用 `__decorate` 函数，将自定义装饰器（如属性装饰器）动态应用到无法修改的第三方类（如 `class A`）的指定属性上。

TypeScript 的装饰器（尤其是实验性/legacy 模式）本质上是编译时注入的运行时函数调用，而非反射元数据操作。当你书写 @test 语法时，TypeScript 编译器会将其转换为对辅助函数 __decorate 的显式调用，目标对象通常是 Class.prototype（对实例属性/方法）或 Class 构造函数本身（对静态成员）。

因此，即使你无法修改外部包中的 class A，只要它已被加载（即 A 是一个有效的构造函数），你就可以手动模拟编译器行为，直接调用 __decorate 并传入你的装饰器、目标原型、属性名和描述符。

✅ 正确做法：手动调用 __decorate

首先，确保你已启用 experimentalDecorators 编译选项（TS 配置中 "experimentalDecorators": true），这样 TypeScript 才会生成 __decorate 辅助函数。若你使用的是现代构建工具（如 Vite、Webpack + ts-loader），该函数通常会被自动注入；但若需完全可控或在纯运行时环境（如 Node.js 动态补丁场景）中使用，建议显式引入或内联 __decorate 实现：

// 可选：内联 __decorate 实现（兼容 legacy 模式）
const __decorate = (decorators: Function[], target: any, key?: string | symbol, desc?: PropertyDescriptor) => {
  let c = arguments.length;
  let r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key!) : desc;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") {
    r = Reflect.decorate(decorators, target, key, desc);
  } else {
    for (let i = decorators.length - 1; i >= 0; i--) {
      if (const d = decorators[i]) {
        r = c < 3 ? d(r) : c > 3 ? d(target, key!, r) : d(target, key!);
      }
    }
  }
  if (c > 3 && r && Object.defineProperty) Object.defineProperty(target, key!, r);
  return r;
};

接着，对 class A 的某个属性（例如 mess）应用你的 @test 装饰器：

// 假设 A 来自外部包，不可修改
import { A } from 'external-package';

// 你的装饰器（修正：原示例有逻辑错误，应操作 descriptor 或 target prototype，而非赋值 target.propertyKey）
function test(target: any, propertyKey: string, descriptor: PropertyDescriptor): void {
  // 示例：为属性添加元数据标记（推荐方式）
  const metadataKey = `__test_applied_${propertyKey}`;
  Reflect.defineMetadata(metadataKey, true, target.constructor, propertyKey);

  // 或：劫持 getter/setter（若需运行时行为）
  if (descriptor.get || descriptor.set) {
    const originalGet = descriptor.get;
    descriptor.get = function () {
      console.log(`[test] accessing ${propertyKey}`);
      return originalGet?.call(this);
    };
  }
}

// ✅ 关键步骤：手动调用 __decorate
__decorate([test], A.prototype, 'mess', Object.getOwnPropertyDescriptor(A.prototype, 'mess') || undefined);

⚠️ 注意事项：

• target 必须是 A.prototype（对实例属性），而非 A 类本身；
• key 是字符串属性名（如 'mess'），必须与类中定义的名称完全一致；
• desc 推荐使用 Object.getOwnPropertyDescriptor(A.prototype, 'mess') 获取原始描述符，确保不丢失原有配置（如 writable、enumerable 等）；若属性尚未定义（如仅声明未初始化），可传 undefined；
• 装饰器函数签名必须严格匹配：(target, propertyKey, descriptor) => void；
• 此操作必须在类实例化之前执行（即在首次 new A() 之前），否则已有实例不会受影响；
• 若目标环境不支持 Reflect.metadata，请改用弱映射（WeakMap）或私有字段模拟元数据存储。

✅ 验证是否生效

const instance = new A();
instance.mess = 'hello';
// 若装饰器中添加了 console 日志或元数据，此时应可见效果
console.log(Reflect.getMetadata('__test_applied_mess', A.prototype, 'mess')); // true

总之，TypeScript 装饰器并非魔法——它是可预测、可复现的函数调用链。掌握 __decorate 的调用契约，你就能安全、精准地“热插拔”装饰器到任何已加载的类上，实现真正的运行时增强能力。

理论要掌握，实操不能落！以上关于《TypeScript动态添加属性装饰器方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！