装饰器

• father::TypeScript

为什么要用装饰器

为什么要用装饰器

提高代码复用性

通过装饰器，我们可以将一些常用的功能封装成装饰器，在需要的地方直接应用这些装饰器，而不需要重复编写相同的代码。这样可以提高代码的复用性。

分离关注点

使用装饰器可以将不同功能分开，使得每个功能模块只关注自己应该关注的内容，避免功能之间的耦合。这样可以使得代码更加清晰易懂。

动态地扩展和修改功能

装饰器可以动态地给已有函数或类添加新的功能，或者修改原有功能，而不需要修改原有代码。这样在不改变原有逻辑的情况下实现新功能或者修复问题。

在框架和库中广泛应用

许多流行框架和库（如Angular、Express等）都广泛使用了装饰器来简化开发流程、提高开发效率，并且使得框架更加灵活和可扩展。

使用指南

如何定义装饰器

在TypeScript中，装饰器是一种特殊的声明，可以附加到类声明、方法、访问符、属性或参数上。装饰器使用@符号紧跟在要修饰的内容之前。

function myDecorator(target: any, propertyKey: string) {
    // do something
}
 
class MyClass {
    @myDecorator
    myProperty: string;
 
    @myDecorator
    myMethod() {}
}

常见的装饰器类型

1. 类装饰器：应用于类构造函数，在类被实例化时调用。
2. 方法装饰器：应用于方法定义，可以用来修改方法的行为。
3. 属性装饰器：应用于属性声明，可以用来修改属性的行为。
4. 参数装饰器：应用于函数参数声明，可以用来修改参数的行为。

注意事项

• 装饰器是实验性质特性，可能会有变动或不被支持。
• 装饰器不能直接作用于函数式组件（functional components）。
• 需要理解装饰器的执行顺序和作用域。

示例

function logged(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
 
    descriptor.value = function (...args: any[]) {
        console.log(`Calling ${propertyKey} with arguments ${args}`);
        const result = originalMethod.apply(this, args);
        console.log(`Finished calling ${propertyKey}, result is ${result}`);
        return result;
    };
 
    return descriptor;
}
 
class Example {
    @logged
    add(a: number, b: number): number {
        return a + b;
    }
}
 
const example = new Example();
example.add(1, 2);

在上面的示例中，我们定义了一个 logged 装饰器，它会在调用被装饰方法时输出日志信息。然后我们将这个装饰器应用到 Example 类的 add 方法上，在调用 add 方法时会自动输出日志信息。