TypeScript 装饰器的高级用法：深入探索与实战
TypeScript 作为 JavaScript 的超集，提供了丰富的类型系统和装饰器等高级特性。装饰器是 TypeScript 中一种强大的功能，它允许开发者在不修改原有代码结构的情况下，对类、方法、属性等进行扩展和增强。本文将深入探讨 TypeScript 装饰器的高级用法，包括类装饰器、方法装饰器、属性装饰器以及装饰器组合等，并通过实际案例展示如何将这些高级技巧应用于实际项目中。
类装饰器
类装饰器是应用于类声明上的装饰器，它可以接收一个参数，即被装饰的类的构造函数。类装饰器可以用来修改类的行为，例如添加新的属性、方法或修改类的原型链。
示例：添加类属性
typescript
function ClassDecorator(target: Function) {
Object.defineProperty(target, 'classProperty', {
value: 'This is a class property added by decorator',
writable: true,
configurable: true,
enumerable: true
});
}
@ClassDecorator
class MyClass {
constructor() {
console.log(this.classProperty); // 输出: This is a class property added by decorator
}
}
示例：修改类的原型链
typescript
function SetPrototype(target: Function) {
target.prototype = {
newMethod() {
return 'This method is added by decorator';
}
};
}
@SetPrototype
class MyClass {
constructor() {
console.log(this.newMethod()); // 输出: This method is added by decorator
}
}
方法装饰器
方法装饰器是应用于类的方法上的装饰器，它可以接收三个参数：装饰的目标方法、目标方法的属性描述符以及目标方法的属性名。
示例：记录方法执行时间
typescript
function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
const start = Date.now();
const result = originalMethod.apply(this, args);
const end = Date.now();
console.log(`${propertyKey} executed in ${end - start} ms`);
return result;
};
return descriptor;
}
class MyClass {
@LogMethod
public method() {
// 模拟耗时操作
return new Promise(resolve => setTimeout(resolve, 1000));
}
}
const instance = new MyClass();
instance.method(); // 输出: method executed in 1000 ms
示例：方法重载
typescript
function Overload(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
if (args.length === 1) {
return originalMethod.apply(this, [args[0]]);
} else if (args.length === 2) {
return originalMethod.apply(this, [args[0], args[1]]);
}
};
return descriptor;
}
class MyClass {
@Overload
public method(x: number): number;
@Overload
public method(x: number, y: number): number {
return x + y;
}
}
const instance = new MyClass();
console.log(instance.method(5)); // 输出: 5
console.log(instance.method(5, 3)); // 输出: 8
属性装饰器
属性装饰器是应用于类属性上的装饰器，它可以接收两个参数：属性的类型和属性名。
示例：验证属性值
typescript
function Validate(target: Object, propertyKey: string) {
const descriptor: PropertyDescriptor = {
configurable: true,
enumerable: true,
get: function() {
return this[propertyKey];
},
set: function(value: any) {
if (typeof value !== 'string') {
throw new Error(`${propertyKey} must be a string`);
}
this[propertyKey] = value;
}
};
Object.defineProperty(target, propertyKey, descriptor);
}
class MyClass {
@Validate
public name: string;
}
const instance = new MyClass();
instance.name = 'John Doe'; // 正常赋值
instance.name = 123; // 抛出错误: name must be a string
装饰器组合
装饰器可以组合使用，以实现更复杂的逻辑。以下是一个示例，展示了如何将多个装饰器组合使用：
typescript
function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(`Method ${propertyKey} is decorated with LogMethod`);
}
function Overload(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(`Method ${propertyKey} is decorated with Overload`);
}
class MyClass {
@LogMethod
@Overload
public method(x: number): number {
return x;
}
}
const instance = new MyClass();
instance.method(5); // 输出: Method method is decorated with LogMethod
// 输出: Method method is decorated with Overload
总结
TypeScript 装饰器是一种强大的工具，它允许开发者以声明式的方式扩展和增强代码。我们学习了类装饰器、方法装饰器、属性装饰器以及装饰器组合的高级用法。在实际项目中，合理运用装饰器可以提高代码的可维护性和可扩展性。希望本文能帮助你更好地理解和应用 TypeScript 装饰器。
Comments NOTHING