10 · 装饰器 - 我的博客

NOTE
装饰器是”给类/方法/属性加元数据或行为的注解语法”，NestJS、Angular 大量使用。TS 里它是实验特性，需显式开启。

1. 开启装饰器#

在 tsconfig.json：

1
{
2
  "compilerOptions": {
3
    "experimentalDecorators": true,
4
    "emitDecoratorMetadata": true // 配合反射元数据（NestJS 需要）
5
  }
6
}

⚠️ TS 的装饰器基于旧版（stage-1）提案写法；新版 TC39 装饰器（stage-3）语法不同，TS 5.0+ 也在逐步对齐。本篇按当前 TS 文档的写法讲，NestJS 等框架仍用此写法。

2. 类装饰器#

接收构造函数，可替换/增强类：

1
function Seal(constructor: Function): void {
2
  Object.seal(constructor);
3
  Object.seal(constructor.prototype);
4
}
5
@Seal
6
class User {
7
  name = "Tom";
8
}

类装饰器参数就是被装饰类的构造函数。

3. 方法装饰器#

接收 (target, propertyKey, descriptor)：

1
function Log(
2
  target: any,
3
  propertyKey: string,
4
  descriptor: PropertyDescriptor,
5
): void {
6
  const original = descriptor.value;
7
  descriptor.value = function (...args: any[]) {
8
    console.log(`调用 ${propertyKey}`, args);
9
    return original.apply(this, args);
10
  };
11
}
12
class Calc {
13
  @Log
14
  add(a: number, b: number): number { return a + b; }
15
}

方法装饰器常用于日志、缓存、权限、性能统计——不侵入业务代码地”包”一层。

4. 访问器 / 属性 / 参数装饰器#

1
// 访问器装饰器（getter/setter），签名同方法装饰器但 descriptor.value 为 undefined
2
function NoNegative(target: any, key: string, descriptor: PropertyDescriptor) {
3
  const setter = descriptor.set!;
4
  descriptor.set = function (v: number) {
5
    if (v < 0) throw new Error("不能为负");
6
    setter.call(this, v);
7
  };
8
}
9

10
class Account {
11
  private _bal = 0;
12
  @NoNegative
13
  set balance(v: number) { this._bal = v; }
14
  get balance() { return this._bal; }
15
}
16

17
// 属性装饰器：(target, propertyKey)
18
function Format(fmt: string) {
19
  return function (target: any, key: string) {} as any;
20
}
21

22
// 参数装饰器：(target, propertyKey, parameterIndex)
23
function Validate(target: any, key: string, index: number) {}

属性/参数装饰器多用于收集元数据（如依赖注入标记），本身不返回值。

5. 装饰器工厂#

上面装饰器都是”硬编码”。用工厂返回真正的装饰器，可传参：

1
function Role(role: string) {
2
  return function (constructor: Function) {
3
    constructor.prototype.role = role;
4
  };
5
}
6
@Role("admin")
7
class AdminService {}

工厂 = “返回装饰器函数的函数”，是装饰器传参的标准写法。

6. 执行顺序#

同一声明上多个装饰器：从下到上求值，但从上到下应用。
不同声明：参数装饰器 → 方法/访问器 → 属性 → 类（先内后外）。

理解顺序在调试元数据注入时有用，日常不必死记。

7. 与框架的关系#

NestJS 用装饰器声明路由、依赖、守卫：

1
@Controller("users")
2
class UserController {
3
  @Get(":id")
4
  @UseGuards(AuthGuard)
5
  findOne(@Param("id") id: string) {}
6
}

装饰器本身只是”语法糖 + 元数据”，真正的逻辑由框架读取这些元数据后驱动。理解这点就不怕框架黑魔法了。

小结#

装饰器需 experimentalDecorators: true。
五类：类 / 方法 / 访问器 / 属性 / 参数装饰器，参数各异。
装饰器工厂 = 返回装饰器的函数，用于传参。
实战价值在 AOP（日志/鉴权/缓存）与框架元数据（NestJS）。

练习#

写 @readonly 类装饰器，把类的 prototype 方法设为不可写（Object.defineProperty）。
写 @Log 方法装饰器记录方法名与耗时（performance.now()）。
用装饰器工厂 @Prefix("api") 给类加一个静态 prefix 属性。
思考：为什么 NestJS 的 @Get() 不需要返回值？（提示：收集元数据）