引言
--
TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，为 JavaScript 添加了静态类型检查和其他一些特性。装饰器是 TypeScript 中一个非常强大的特性，它可以用来修改类、方法、属性等的行为。本文将深入探讨 TypeScript 装饰器的原理和用法。
基本概念
装饰器是一种特殊类型的声明，它可以被附加到类声明、方法、属性或参数上，以修改类的行为。装饰器使用 @ 符号作为前缀，并放置在被修饰项之前。
装饰器的分类
在 TypeScript 中，装饰器可以分为四种类型：类装饰器、方法装饰器、属性装饰器和参数装饰器。
1. 类装饰器
类装饰器是应用于类构造函数的函数。它接收一个参数，即被修饰的类构造函数，并可以在不修改原始类定义的情况下扩展或修改该类。
代码语言：typescript复制function logClass(target: any) {
console.log(target);
}
@logClass
class MyClass {
// ...
}2. 方法装饰器
方法装饰器是应用于方法定义的函数。它接收三个参数：被修饰的类的原型、方法的名称和方法的属性描述符。方法装饰器可以用来修改方法的行为，例如添加日志、验证等。
代码语言：typescript复制function logMethod(target: any, methodName: string, descriptor: PropertyDescriptor) {
console.log(target, methodName, descriptor);
}
class MyClass {
@logMethod
myMethod() {
// ...
}
}3. 属性装饰器
属性装饰器是应用于属性声明的函数。它接收两个参数：被修饰的类的原型和属性名称。属性装饰器可以用来修改属性的行为，例如添加验证、计算等。
代码语言：typescript复制function logProperty(target: any, propertyName: string) {
console.log(target, propertyName);
}
class MyClass {
@logProperty
myProperty: string;
}4. 参数装饰器
参数装饰器是应用于函数参数声明的函数。它接收三个参数：被修饰的类的原型、方法名称和参数索引。参数装饰器可以用来修改函数参数的行为，例如添加验证、转换等。
代码语言：typescript复制function logParameter(target: any, methodName: string, parameterIndex: number) {
console.log(target, methodName, parameterIndex);
}
class MyClass {
myMethod(@logParameter param1: string) {
// ...
}
}装饰器工厂
除了直接使用装饰器函数，我们还可以使用装饰器工厂来创建装饰器。装饰器工厂是一个返回装饰器函数的函数，它可以接收参数，并根据参数返回不同的装饰器。
代码语言：typescript复制function logClassFactory(prefix: string) {
return function (target: any) {
console.log(`${prefix} ${target}`);
};
}
@logClassFactory('Logging')
class MyClass {
// ...
}装饰器的执行顺序
当一个类有多个装饰器时，它们的执行顺序是从下到上、从右到左的。这意味着最后一个装饰器先执行，然后依次向上执行。
代码语言：typescript复制function log1(target: any) {
console.log('log1');
}
function log2(target: any) {
console.log('log2');
}
@log1
@log2
class MyClass {
// ...
}输出结果：
log2 log1
装饰器的应用场景
装饰器在 TypeScript 中有广泛的应用场景，例如：
- 日志记录：可以使用类装饰器或方法装饰器来添加日志记录功能。
- 权限控制：可以使用方法装饰器来限制只有特定角色或权限才能调用某个方法。
- 表单验证：可以使用属性装饰器或参数装饰器来验证表单字段的合法性。
- 性能分析：可以使用方法装饰器来记录方法的执行时间，以便进行性能分析。
日志记录
当涉及到日志记录时，可以使用类装饰器或方法装饰器来添加日志记录功能。例如，我们可以创建一个类装饰器 @logClass，在类的构造函数中添加日志记录的逻辑。这样，在每次创建该类的实例时，都会自动记录相关日志信息。
function logClass(target: any) {
const originalConstructor = target;
const newConstructor: any = function (...args: any[]) {
console.log(`Creating instance of ${originalConstructor.name}`);
return new originalConstructor(...args);
};
newConstructor.prototype = originalConstructor.prototype;
return newConstructor;
}
@logClass
class MyClass {
constructor() {
console.log('MyClass constructor');
}
}
const myInstance = new MyClass();权限控制
在权限控制方面，可以使用方法装饰器来限制只有特定角色或权限才能调用某个方法。例如，我们可以创建一个方法装饰器 @checkPermission，在调用被修饰的方法之前进行权限验证。
function checkPermission(target: any, methodName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
// 检查用户权限
if (hasPermission()) {
return originalMethod.apply(this, args);
} else {
throw new Error('You do not have permission to access this method.');
}
};
}
class MyClass {
@checkPermission
myMethod() {
console.log('Executing myMethod');
}
}
const myInstance = new MyClass();
myInstance.myMethod(); // 只有具有权限的用户才能成功调用该方法表单验证
在表单验证方面，可以使用属性装饰器或参数装饰器来验证表单字段的合法性。例如，我们可以创建一个属性装饰器 @validateField，在设置属性值时进行验证。
function validateField(target: any, propertyName: string) {
const originalValue = target[propertyName];
Object.defineProperty(target, propertyName, {
get() {
return originalValue;
},
set(value: any) {
// 进行字段验证
if (isValid(value)) {
originalValue = value;
} else {
throw new Error(`Invalid value for ${propertyName}`);
}
},
});
}
class Form {
@validateField
name: string;
constructor(name: string) {
this.name = name;
}
}
const form = new Form('John');
form.name = 'Jane'; // 合法的值
form.name = ''; // 非法的值，会抛出错误性能分析
在性能分析方面，可以使用方法装饰器来记录方法的执行时间，以便进行性能分析。例如，我们可以创建一个方法装饰器 @measurePerformance，在调用被修饰的方法时记录执行时间。
function measurePerformance(target: any, methodName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
const start = performance.now();
const result = originalMethod.apply(this, args);
const end = performance.now();
console.log(`Method ${methodName} took ${end - start} milliseconds to execute.`);
return result;
};
}
class MyClass {
@measurePerformance
myMethod() {
// 执行一些耗时的操作
for (let i = 0; i < 1000000000; i ) {
// ...
}
}
}
const myInstance = new MyClass();
myInstance.myMethod(); // 输出方法执行时间这些示例展示了装饰器在不同场景下的应用。通过使用装饰器，我们可以轻松地为类、方法、属性或参数添加额外的功能和行为，从而实现更加灵活和可扩展的代码结构。
TypeScript进阶（一）深入理解类和接口
总结
--
本文深入探讨了 TypeScript 装饰器的原理和用法。装饰器是 TypeScript 中一个非常强大的特性，它可以用来修改类、方法、属性等的行为。通过使用装饰器，我们可以轻松地扩展和修改现有的类和方法，使其具有更多的功能和特性。
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
