游牧学院

9.2 类装饰器
9.4 属性装饰器

TypeScript 装饰器教程：方法装饰器

引言

在 TypeScript 中，装饰器是一种特殊的语法，用于在类声明和成员上添加注解或元数据。装饰器可以用于类、方法、属性和参数。本文将深入探讨方法装饰器的概念、用法、优缺点以及注意事项，并提供丰富的示例代码。

什么是方法装饰器？

方法装饰器是应用于类方法的装饰器。它可以用于修改方法的行为、添加日志、权限检查、性能监控等。方法装饰器的定义如下：

function MethodDecorator(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void {
    // 装饰器逻辑
}
  • target：被装饰的类的原型对象。
  • propertyKey：被装饰的方法名称。
  • descriptor：方法的属性描述符，可以用来修改方法的行为。

方法装饰器的基本用法

示例 1：简单的日志装饰器

下面的示例展示了一个简单的日志装饰器，它会在方法调用时输出日志信息。

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
        const result = originalMethod.apply(this, args);
        console.log(`Result: ${result}`);
        return result;
    };
}

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

const calc = new Calculator();
calc.add(2, 3);

输出：

Calling add with arguments: [2,3]
Result: 5

解析

在这个示例中，LogMethod 装饰器拦截了 add 方法的调用，记录了调用的参数和返回值。这种方式可以帮助我们在调试时更好地理解代码的执行过程。

方法装饰器的优点

  1. 代码复用：装饰器可以将通用的逻辑提取到一个地方，避免代码重复。
  2. 增强功能：可以在不修改原有方法的情况下，增强方法的功能。
  3. 清晰的语法：装饰器提供了一种清晰的方式来添加元数据和行为，增强了代码的可读性。

方法装饰器的缺点

  1. 性能开销：装饰器会增加方法调用的开销，尤其是在频繁调用的方法上。
  2. 调试困难：由于装饰器的存在，调试时可能会导致调用栈变得复杂，增加了排查问题的难度。
  3. 不易理解：对于不熟悉装饰器的开发者，装饰器的使用可能会导致代码的理解难度增加。

注意事项

  1. 装饰器的顺序：如果一个方法有多个装饰器，它们的执行顺序是从下到上的。即，最下面的装饰器会最先执行。
  2. 装饰器的返回值：装饰器可以返回一个新的描述符，来替换原有的方法。如果不返回，原有的方法将保持不变。
  3. TypeScript 配置：确保在 tsconfig.json 中启用 experimentalDecorators 选项，以支持装饰器。
{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

示例 2：权限检查装饰器

下面的示例展示了一个权限检查装饰器，它会在调用方法之前检查用户是否有权限执行该操作。

function RequiresPermission(permission: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = function (...args: any[]) {
            const userPermissions = this.getUserPermissions(); // 假设有一个方法获取用户权限
            if (!userPermissions.includes(permission)) {
                throw new Error(`User does not have permission: ${permission}`);
            }
            return originalMethod.apply(this, args);
        };
    };
}

class UserService {
    private permissions: string[] = ['READ_USERS'];

    getUserPermissions() {
        return this.permissions;
    }

    @RequiresPermission('DELETE_USERS')
    deleteUser(userId: number) {
        console.log(`User ${userId} deleted.`);
    }
}

const userService = new UserService();
try {
    userService.deleteUser(1);
} catch (error) {
    console.error(error.message);
}

输出：

User does not have permission: DELETE_USERS

解析

在这个示例中，RequiresPermission 装饰器检查用户是否具有执行 deleteUser 方法所需的权限。如果没有权限，则抛出错误。这种方式可以有效地将权限控制逻辑与业务逻辑分离，提高代码的可维护性。

总结

方法装饰器是 TypeScript 中一个强大的特性，它允许开发者在不修改原有方法的情况下，增强其功能或添加额外的逻辑。通过合理使用装饰器，可以提高代码的可读性和可维护性。然而，开发者在使用装饰器时也需要注意性能开销和调试的复杂性。希望本文能帮助你更好地理解和使用 TypeScript 的方法装饰器。

9.2 类装饰器
9.4 属性装饰器