深入理解 TypeScript 装饰器：优雅地增强你的代码

TypeScript 装饰器

在现代前端开发中，装饰器已成为一个重要的工具，能够使我们更加灵活、优雅地增强和定制 JavaScript 和 TypeScript 代码。本文将深入探讨 TypeScript 中装饰器的概念、使用方法和示例。

1. 什么是装饰器？

装饰器是一种特殊类型的声明，可以附加到类声明、方法、访问器、属性或参数上，以修改其行为。它们被广泛用于框架和库中，用于实现诸如依赖注入、AOP（面向切面编程）、元数据收集等功能。

2. 基本语法

在 TypeScript 中，装饰器使用 @ 符号紧随其后，并且通常是一个函数调用。例如：

function myDecorator(target: any, propertyKey: string) {
    // 在这里可以对目标进行一些操作
}

class MyClass {
    @myDecorator
    myMethod() {
        // 方法体
    }
}

3. 装饰器分类

类装饰器

类装饰器应用于类构造函数，并用于监视、修改或替换类定义。

function logClass(target: any) {
    console.log(target);
}

@logClass
class MyLoggedClass {
    // 类定义
}

方法装饰器

方法装饰器用于监视、修改或替换类中的方法定义。

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(propertyKey);
}

class MyLoggedMethodClass {
    @logMethod
    myMethod() {
        // 方法体
    }
}

属性装饰器

属性装饰器用于监视、修改或替换类中的属性定义。

function logProperty(target: any, propertyKey: string) {
    console.log(propertyKey);
}

class MyLoggedPropertyClass {
    @logProperty
    myProperty: string;
}

4. 装饰器的实际应用

日志记录装饰器

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`${propertyKey} 方法被调用`);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

class Calculator {
    @log
    square(n: number): number {
        return n * n;
    }
}

const calc = new Calculator();
calc.square(5); // 控制台输出：square 方法被调用

认证装饰器

function authenticate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args: any[]) {
        if (checkAuthentication()) {
            return originalMethod.apply(this, args);
        } else {
            throw new Error("用户未认证");
        }
    };
    return descriptor;
}

class SecureResource {
    @authenticate
    getData() {
        return "机密数据";
    }
}

const resource = new SecureResource();
resource.getData(); // 如果用户已认证，返回数据；否则抛出错误

5. 结语

通过本文的介绍和示例，读者可以更好地了解 TypeScript 装饰器的基本概念、语法以及实际应用场景。装饰器作为一种强大的编程工具，能够帮助开发者优雅地扩展和定制代码，增强代码的可维护性和可复用性，是现代前端开发中不可或缺的一部分。希望本文能够帮助你更好地利用装饰器提升你的代码质量和开发