前端：你好，我叫 TypeScript（五）装饰器

在前端开发的世界里，TypeScript 为我们带来了许多强大的特性，其中装饰器（Decorators）无疑是一颗璀璨的明珠。

装饰器是一种特殊类型的声明，它能够为类、方法、属性等添加额外的行为或属性。通过装饰器，我们可以实现诸如日志记录、权限控制、数据验证等功能，极大地提高了代码的可维护性和复用性。

以一个简单的示例来说，假设有一个类代表用户信息。我们可以使用装饰器来在获取用户信息时添加日志记录。

function logGetUserInfo(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`获取用户信息: ${propertyKey}`);
    return originalMethod.apply(this, args);
  };
}

class UserInfo {
  @logGetUserInfo
  getUserInfo() {
    // 实际获取用户信息的逻辑
    return { name: '张三', age: 25 };
  }
}

在上述代码中，logGetUserInfo 装饰器在调用 getUserInfo 方法时，先输出了一条日志，然后再执行原本的方法逻辑。

装饰器还可以用于实现权限控制。例如，只有特定角色的用户才能执行某个方法。

function roleCheck(role: string) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
      if (this.role === role) {
        return originalMethod.apply(this, args);
      } else {
        console.error('权限不足，无法执行此操作');
        return null;
      }
    };
  };
}

class AdminFunctions {
  role = 'admin';

  @roleCheck('admin')
  performAdminTask() {
    // 只有管理员才能执行的任务逻辑
    return '执行管理员任务';
  }
}

通过这种方式，我们可以在不修改原有代码结构的基础上，为代码添加各种灵活的控制逻辑。

TypeScript 中的装饰器为前端开发带来了更多的可能性和灵活性。它使得我们能够以一种优雅且高效的方式对代码进行增强和扩展，让我们的前端项目更加健壮和易于维护。在实际开发中，合理运用装饰器，能够大大提升我们的开发效率和代码质量。