技术文档中心
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
  • 基础入门

    • TypeScript 学习指南
    • 基础类型
    • 函数
    • 接口
    • 类
  • 进阶内容

    • 泛型
    • 高级类型
    • 工具类型
    • 装饰器
    • 模块
  • 实战应用

    • 配置文件
    • 实战应用

装饰器

启用装饰器

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

类装饰器

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

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
}

装饰器工厂

function color(value: string) {
  return function(target: Function) {
    target.prototype.color = value;
  };
}

@color('red')
class Car {}

方法装饰器

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    console.log(`调用 ${propertyKey},参数:`, args);
    const result = originalMethod.apply(this, args);
    console.log(`返回:`, result);
    return result;
  };
  
  return descriptor;
}

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

访问器装饰器

function configurable(value: boolean) {
  return function(
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    descriptor.configurable = value;
  };
}

class Point {
  private _x: number;
  
  @configurable(false)
  get x() {
    return this._x;
  }
}

属性装饰器

function format(formatString: string) {
  return function(target: any, propertyKey: string) {
    let value: string;
    
    const getter = function() {
      return value;
    };
    
    const setter = function(newVal: string) {
      value = formatString.replace('%s', newVal);
    };
    
    Object.defineProperty(target, propertyKey, {
      get: getter,
      set: setter
    });
  };
}

class Greeter {
  @format('Hello, %s')
  greeting: string;
}

参数装饰器

function required(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`参数 ${parameterIndex} 在 ${propertyKey} 中是必需的`);
}

class Greeter {
  greet(@required name: string) {
    return `Hello, ${name}`;
  }
}

装饰器组合

function first() {
  console.log('first(): factory');
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log('first(): called');
  };
}

function second() {
  console.log('second(): factory');
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log('second(): called');
  };
}

class Example {
  @first()
  @second()
  method() {}
}

// 输出:
// first(): factory
// second(): factory
// second(): called
// first(): called

实战示例

自动绑定

function autobind(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  return {
    configurable: true,
    get() {
      return originalMethod.bind(this);
    }
  };
}

class Printer {
  message = 'Hello';
  
  @autobind
  print() {
    console.log(this.message);
  }
}

const printer = new Printer();
const print = printer.print;
print(); // 'Hello'

性能监控

function measure(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    const start = performance.now();
    const result = originalMethod.apply(this, args);
    const end = performance.now();
    console.log(`${propertyKey} 执行时间: ${end - start}ms`);
    return result;
  };
  
  return descriptor;
}

class Service {
  @measure
  fetchData() {
    // 模拟耗时操作
  }
}
最近更新: 2026/2/6 15:39
Contributors: hailong
Prev
工具类型
Next
模块