当前位置：首页 > news >正文

TypeScript 装饰器都有那些应用场景？如何更快的上手？

news 2025/7/5 19:04:43

TypeScript 装饰器简介

在 TypeScript 中，装饰器（Decorators）是一种特殊的语法，用于在类、类方法、属性、访问器等上动态地添加行为或修改现有行为。装饰器可以用来增强类的功能、修改方法的行为，或者修改类的元数据等。它们通常用于元编程和 AOP（面向切面编程）等场景。

装饰器在 TypeScript 中的实现基于 ECMAScript 提案的实验性特性，但目前 TypeScript 已经支持了装饰器的编写和使用。需要注意的是，装饰器特性必须通过 experimentalDecorators 编译选项开启。

开启装饰器支持

在 tsconfig.json 中配置：

{"compilerOptions": {"experimentalDecorators": true}
}

装饰器的类型

装饰器可以应用于以下几种目标：

类装饰器 (Class Decorators)：应用于类构造函数，修改类的行为或元数据。
方法装饰器 (Method Decorators)：应用于类的方法，允许修改方法的属性或行为。
属性装饰器 (Property Decorators)：应用于类的属性，用于修改或定义属性的元数据。
访问器装饰器 (Accessor Decorators)：应用于类的 getter 或 setter 方法。
参数装饰器 (Parameter Decorators)：应用于方法参数，主要用于修改或注入方法参数的元数据。

装饰器的应用场景

装饰器常用于以下几个场景：

类的功能增强：如注入依赖、日志记录、权限校验等。
方法行为修改：例如，控制方法的执行、缓存机制、性能监控等。
自动化注入：在一些框架中，装饰器用来自动注入依赖，比如 Angular 中的服务注入。
性能分析和日志：自动记录函数的调用时间、参数等。

示例：使用装饰器的实际场景

假设我们有一个项目需要记录方法调用的日志，并且需要验证用户是否有权限执行某些操作。我们可以使用装饰器来实现这些功能。

1. 类装饰器

类装饰器通常用于增强类的行为，比如记录日志、依赖注入等。

function Logger(constructor: Function) {console.log(`Class ${constructor.name} is instantiated.`);
}@Logger
class UserService {constructor() {console.log("UserService instance created.");}
}const userService = new UserService();

解释：Logger 装饰器会在类实例化时打印出该类的名称。在 @Logger 之后，当 UserService 被实例化时，控制台输出 Class UserService is instantiated.。

2. 方法装饰器

方法装饰器可以修改方法的行为或添加额外的功能。我们可以使用方法装饰器来记录日志，验证权限等。

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {console.log(`Method ${propertyName} is called with args: ${args}`);return originalMethod.apply(this, args);};
}class UserService {@LoggetUser(userId: number) {console.log(`Fetching user with ID: ${userId}`);}
}const userService = new UserService();
userService.getUser(42);

解释：@Log 装饰器会修改 getUser 方法，在调用该方法时记录日志，打印出方法名和传入的参数。输出结果为：

Method getUser is called with args: [42]
Fetching user with ID: 42

3. 属性装饰器

属性装饰器可以用来修改类的属性行为或元数据。例如，我们可以用它来设置字段的可访问性或记录日志。

function Observable(target: any, propertyName: string) {let value = target[propertyName];const getter = () => {console.log(`Getting value of ${propertyName}: ${value}`);return value;};const setter = (newVal: any) => {console.log(`Setting value of ${propertyName} to: ${newVal}`);value = newVal;};Object.defineProperty(target, propertyName, {get: getter,set: setter,});
}class User {@Observablename: string;constructor(name: string) {this.name = name;}
}const user = new User("Alice");
user.name = "Bob";  // Console logs: Setting value of name to: Bob
console.log(user.name);  // Console logs: Getting value of name: Bob

解释：@Observable 装饰器为 name 属性创建了 getter 和 setter 方法，控制属性的访问并记录相关日志。

4. 权限校验的实际应用

装饰器常用于权限校验等场景，检查用户是否有权限执行某个方法。例如：

function PermissionRequired(permission: string) {return function (target: any, propertyName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {const userPermissions = ["READ", "WRITE"];  // 假设的用户权限if (!userPermissions.includes(permission)) {console.log(`Permission denied. Missing permission: ${permission}`);return;}return originalMethod.apply(this, args);};};
}class DocumentService {@PermissionRequired("WRITE")editDocument() {console.log("Document is being edited.");}
}const documentService = new DocumentService();
documentService.editDocument();  // 如果权限包含 "WRITE"，则输出 "Document is being edited."

解释：@PermissionRequired 装饰器会在方法执行前检查当前用户的权限。如果权限不足，则拒绝执行方法。

组合使用装饰器

在实际项目中，装饰器可以进行组合使用，进行多种功能的扩展。例如，我们可以结合使用日志记录和权限校验装饰器：

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {console.log(`Calling method ${propertyName} with arguments: ${args}`);return originalMethod.apply(this, args);};
}function PermissionRequired(permission: string) {return function (target: any, propertyName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {const userPermissions = ["READ", "WRITE"];if (!userPermissions.includes(permission)) {console.log(`Permission denied. Missing permission: ${permission}`);return;}return originalMethod.apply(this, args);};};
}class FileService {@Log@PermissionRequired("READ")readFile(filePath: string) {console.log(`Reading file from ${filePath}`);}
}const fileService = new FileService();
fileService.readFile("/path/to/file");