在 TypeScript 里使用装饰器，前提条件得先配好：需要启用 experimentalDecorators 和 emitDecoratorMetadata，同时还要确保 target 不低于 ES2015。

具体来看，类装饰器作用于构造函数；方法装饰器主要处理 descriptor.value；参数装饰器和属性装饰器则分别承担参数标记与字段初始化的职责。

至于执行顺序，也有明确规则：先类，再方法/属性，最后才是参数。

在 TypeScript 里，如果想用装饰器语法给类和方法“加能力”，前提是先打开实验性装饰器支持，同时把它的执行方式和适用边界搞清楚。

说到底，装饰器在截至 ES2024 的阶段里，仍然不属于 ECMAScript 正式标准，而是 TypeScript 提供的一项实验特性。不过在实际开发中，它早已不是冷门能力，像 Angular、NestJS 这类框架里都大量用到了它。

开启装饰器支持

TypeScript 默认禁用装饰器，需手动配置：

• 在 tsconfig.json 中设置：
  "experimentalDecorators": true（启用装饰器语法）
  "emitDecoratorMetadata": true（可选，用于反射元数据，如依赖注入）
• 确保 target 至少为 ES2015（因装饰器依赖 class 和 Reflect API）
• 若需运行时元数据操作（如 @Reflect.metadata），需引入 reflect-metadata polyfill（在入口文件顶部 import）

定义和使用类装饰器

类装饰器接收构造函数作为唯一参数，可用于修改类定义、添加静态属性或替换构造函数。

• 写法示例：
  

  function sealed(constructor: any) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
  }

  
  

  @sealed
  class Person { ... }

• 可返回新构造函数实现拦截或包装（注意：返回新构造函数会替换原类）
• 常用于框架级功能，如路由注册（@Controller）、单例标记等

定义和使用方法装饰器

方法装饰器接收三个参数：目标对象（类原型或构造函数）、方法名、属性描述符。

它适合做日志、权限校验、缓存等横切逻辑。

• 基础结构：
  

  function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args: any[]) {
      console.log(`Calling ${propertyKey} with`, args);
      return originalMethod.apply(this, args);
    };
  }

• 必须操作 descriptor.value 并重新赋值，否则不会生效
• 注意 this 指向和箭头函数限制：装饰器不适用于箭头函数方法（无独立函数上下文）

参数装饰器与属性装饰器

参数装饰器用于标记方法参数，常配合依赖注入使用。

属性装饰器用于字段初始化或元数据标记。

• 参数装饰器签名：(target: any, propertyKey: string | symbol, parameterIndex: number)
  通常搭配 Reflect.defineMetadata 存储类型信息（如 @Inject(HttpClient)）
• 属性装饰器签名：(target: any, propertyKey: string | symbol)
  可用于自动初始化、响应式绑定（如 Vue Class Component）或验证（@Required）
• 三者执行顺序固定：类装饰器 → 方法/访问器/属性装饰器 → 参数装饰器

《夸克》非常好用的免费AI浏览器

下载APP查看