当前位置：首页 > news >正文

TypeScript装饰器：从入门到精通

news 来源：原创 2025/5/15 6:19:46

TypeScript装饰器：从入门到精通

什么是装饰器？

装饰器（Decorator）是TypeScript中一个非常酷的特性，它允许我们在不修改原有代码的情况下，给类、方法、属性等添加额外的功能。想象一下装饰器就像给你的代码"穿衣服"，可以一层层地叠加功能，而不会破坏原有的结构。

在ES2016中，装饰器还只是一个提案，但TypeScript已经提前实现了这个功能。要使用装饰器，需要在tsconfig.json中开启experimentalDecorators选项。

装饰器基础

类装饰器

类装饰器是最简单的一种装饰器，它接收一个构造函数作为参数。让我们看个例子：

function logClass(target: Function) {console.log(`类 ${target.name} 被装饰了`);
}@logClass
class MyClass {constructor() {console.log('创建MyClass实例');}
}const myClass = new MyClass();
// 输出:
// 类 MyClass 被装饰了
// 创建MyClass实例

方法装饰器

方法装饰器可以拦截方法的调用，非常适合用于日志记录、权限验证等场景：

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function(...args: any[]) {console.log(`调用方法 ${propertyKey}，参数: ${JSON.stringify(args)}`);const result = originalMethod.apply(this, args);console.log(`方法 ${propertyKey} 返回: ${result}`);return result;};return descriptor;
}class Calculator {@logMethodadd(a: number, b: number): number {return a + b;}
}const calc = new Calculator();
calc.add(2, 3);
// 输出:
// 调用方法 add，参数: [2,3]
// 方法 add 返回: 5

装饰器工厂

有时候我们希望装饰器能接收参数，这时候就需要使用装饰器工厂：

function logWithPrefix(prefix: string) {return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function(...args: any[]) {console.log(`[${prefix}] 调用方法 ${propertyKey}`);return originalMethod.apply(this, args);};return descriptor;};
}class Logger {@logWithPrefix('DEBUG')log(message: string) {console.log(message);}
}const logger = new Logger();
logger.log('这是一条日志');
// 输出:
// [DEBUG] 调用方法 log
// 这是一条日志

装饰器的执行顺序

当多个装饰器应用于同一个声明时，它们的执行顺序很重要：

参数装饰器，然后是方法、访问器或属性装饰器
装饰器从最靠近声明的装饰器开始执行
类装饰器最后执行

function first() {console.log('first() 工厂函数');return function(target: any) {console.log('first() 装饰器');};
}function second() {console.log('second() 工厂函数');return function(target: any) {console.log('second() 装饰器');};
}@first()
@second()
class ExampleClass {}// 输出:
// first() 工厂函数
// second() 工厂函数
// second() 装饰器
// first() 装饰器

装饰器的实际应用

1. 自动绑定this

在React类组件中，我们经常需要绑定方法的this指向，装饰器可以帮我们自动完成：

function autobind(_: any, _2: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;const adjDescriptor: PropertyDescriptor = {configurable: true,enumerable: false,get() {const boundFn = originalMethod.bind(this);return boundFn;}};return adjDescriptor;
}class Button {@autobindonClick() {console.log('按钮被点击', this);}
}const button = new Button();
document.addEventListener('click', button.onClick);

2. 表单验证

装饰器可以很方便地实现表单验证逻辑：

function validate(min: number, max: number) {return function(target: any, propertyKey: string) {let value: number;const getter = function() {return value;};const setter = function(newVal: number) {if (newVal < min || newVal > max) {throw new Error(`值必须在 ${min} 和 ${max} 之间`);}value = newVal;};Object.defineProperty(target, propertyKey, {get: getter,set: setter});};
}class User {@validate(1, 120)age: number;
}const user = new User();
user.age = 25; // 正常
user.age = 0;  // 抛出错误