前置知识: TypeScript

装饰器详解

1 minAdvanced2026/6/14

TypeScript装饰器与元编程

1. 装饰器概述

{ "compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true } }

2. 装饰器

function LogClass(target: Function) {
  console.log(`类 ${target.name} 被创建`);
}

@LogClass
class MyClass {}

// 工厂装饰器
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

3. 方法装饰器

function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`调用 ${key},参数: ${args}`);
    return original.apply(this, args);
  };
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

4. 属性装饰器

function DefaultValue(value: any) {
  return function (target: any, key: string) {
    Object.defineProperty(target, key, {
      value,
      writable: true,
      enumerable: true,
    });
  };
}

class User {
  @DefaultValue('Anonymous')
  name: string;
}

5. 参数装饰器

function Required(target: any, key: string, index: number) {
  const requiredParams: number[] = Reflect.getMetadata('required', target, key) || [];
  requiredParams.push(index);
  Reflect.defineMetadata('required', requiredParams, target, key);
}

6. TC39 Stage 3 装饰器(新标准)

// 新装饰器语法(TS 5.0+)
function logged(originalMethod: any, context: ClassMethodDecoratorContext) {
  return function (this: any, ...args: any[]) {
    console.log(`调用 ${String(context.name)}`);
    return originalMethod.call(this, ...args);
  };
}

class MyClass {
  @logged
  method() {}
}