在前端开发中，TypeScript 已经成为许多开发者的首选语言之一。与 JavaScript 相比，TypeScript 能够帮助你更好地管理代码和降低出错风险。除此之外，TypeScript 还支持装饰器的概念，可以帮助开发者提高代码质量和可读性，下面我们就来看一看 TypeScript 装饰器的基本概念以及如何使用它们来增强代码功能。
装饰器的基本概念
装饰器是一种特殊的语法结构，它可以被用来修饰类或类中的属性和方法。简单来说，装饰器就是一种函数，它可以接收一些参数，然后应用于它所修饰的目标上。
在 TypeScript 中，装饰器是通过工厂函数和元数据实现的。工厂函数是用来返回实际的装饰器的，而元数据是一些描述性的信息，它们可以被存储在类和类成员定义中的注解中。
如何使用装饰器
在 TypeScript 中，使用装饰器需要遵循以下步骤：
- 创建一个装饰器函数
- 用 @ 符号来调用这个装饰器函数并将它附加到相应的类、属性或方法上
下面我们来看一下具体的示例代码：
// javascriptcn.com 代码示例
/**
* 装饰器函数
* @param target 要修饰的类的构造函数
*/
function log(target: any) {
// 保存类原型的引用
const original = target.prototype;
// 定义新的构造函数
function newConstructor(...args) {
console.log('Creating new instance of:', original.constructor.name);
return Reflect.construct(original.constructor, args);
}
// 复制原型上的属性和方法
Object.getOwnPropertyNames(original).forEach(prop => {
Object.defineProperty(newConstructor, prop, Object.getOwnPropertyDescriptor(original, prop));
});
return newConstructor;
}
// 用装饰器修饰类
@log
class Person {
constructor(public name: string, public age: number) {}
sayHi(): void {
console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
}
}
// 创建一个新的实例
const p = new Person('John', 25);
p.sayHi();在这个示例中，我们定义了一个装饰器函数 log，它可以将类的构造函数作为参数。装饰器函数返回一个新的构造函数，我们可以在这个函数中增加一些额外的逻辑，比如在创建实例的时候输出日志信息。使用装饰器就是在类定义前面添加 @ 符号并调用装饰器函数。在本例中，我们将 log 装饰器应用于 Person 类上，并创建了一个新的 Person 实例。
装饰器的类型
在 TypeScript 中，装饰器有很多种类型，可以用于增强不同目标的代码功能。我们将逐一介绍其中比较常用的一些类型。
类装饰器
类装饰器用于修饰类本身，可以用来增强类的功能或修改类的行为。类装饰器在类定义前使用 @ 符号表示，它接收一个参数，表示要修饰的类的构造函数。
例如，如果我们想要在类实例化的时候输出一些日志信息，可以使用一个类装饰器：
// javascriptcn.com 代码示例
/**
* 类装饰器，用来输出日志
*/
function log(target: any) {
console.log(`Creating new instance of ${target.name}`);
}
// 用装饰器修饰类
@log
class Person {
constructor(public name: string, public age: number) {}
sayHi(): void {
console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
}
}
// 创建一个新的实例
const p = new Person('John', 25);属性装饰器
属性装饰器用于修饰类中的属性，可以用来增强属性的功能或修改属性的行为。属性装饰器在属性定义前通过 @ 符号使用，它接收两个参数，第一个参数是所修饰的类的原型，第二个参数是属性的名称。
下面是一个使用属性装饰器自动为属性添加 getter 和 setter 方法的示例：
// javascriptcn.com 代码示例
/**
* 属性装饰器，用来添加 getter 和 setter
*/
function accessor(target: any, key: string) {
Object.defineProperty(target, key, {
get() {
return this['_' + key];
},
set(value) {
this['_' + key] = value;
}
});
}
// 用装饰器修饰类中的属性
class Person {
@accessor
public name: string;
constructor(name: string) {
this.name = name;
}
}
const p = new Person('John');
p.name = 'Mary';
console.log(p.name); // Output: Mary方法装饰器
方法装饰器用于修饰类中的方法，可以用来增强方法的功能或修改方法的行为。方法装饰器在方法定义前通过 @ 符号使用，它接收三个参数，第一个参数是所修饰的类的原型，第二个参数是方法的名称，第三个参数是方法的描述符。
下面是一个使用方法装饰器记录方法执行时间的示例：
// javascriptcn.com 代码示例
/**
* 方法装饰器，用来记录方法执行时间
*/
function timing(target: any, key: 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 ${key} took ${(end - start).toFixed(2)} milliseconds to execute.`);
return result;
};
return descriptor;
}
// 用装饰器修饰类中的方法
class Calculator {
@timing
public add(a: number, b: number) {
return a + b;
}
}
const calc = new Calculator();
calc.add(2, 3);参数装饰器
参数装饰器用于修饰方法或函数的参数，可以用来增强参数的功能或修改参数的行为。参数装饰器接收三个参数，分别是所修饰的类的原型（如果是静态方法则修饰构造函数）、方法名称或 null（如果是构造函数则为 undefined）、参数在函数参数列表中的索引。
下面是一个使用参数装饰器验证方法参数类型的示例：
// javascriptcn.com 代码示例
/**
* 参数装饰器，用来验证函数参数类型
*/
function validate(type: string) {
return function (target: any, methodName: string, argumentIndex: number) {
const originalMethod = target[methodName];
target[methodName] = function (...args: any[]) {
const argType = typeof args[argumentIndex];
if (argType !== type) {
throw new Error(`Invalid argument type. Expected ${type}, but got ${argType}`);
}
return originalMethod.apply(this, args);
}
}
}
// 用装饰器修饰方法参数
class Calculator {
public add(@validate('number') a: number, @validate('number') b: number) {
return a + b;
}
}
const calc = new Calculator();
calc.add(2, 3);总结
TypeScript 装饰器是一种十分强大的语法结构，它可以用来增强代码的功能和可读性。在本文中，我们介绍了装饰器的基本概念和步骤，并分别介绍了常用的类、属性、方法和参数装饰器的用法和示例。希望本文可以帮助开发者更好地掌握 TypeScript 装饰器的使用方法和技巧，为代码编写和维护带来更多便利和效益。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6541047f7d4982a6ebaa40e0