本文深入解析 TypeScript 装饰器的作用、结构及配置方法，详细讲解类装饰器、装饰器工厂、方法装饰器、参数装饰器和属性装饰器五大类型。通过 axios 封装等实际代码示例，展示如何在不修改原类的前提下动态扩展对象功能，提升代码可读性与复用性。
一、装饰器的作用
装饰器能够在不修改原始类定义且不使用继承机制的前提下，动态地扩展对象的功能。
作为一种特殊的声明形式，装饰器可以附加到类声明、方法、访问符、属性或参数上。
二、结构
@Base
class Http {
}从本质上看，装饰器就是一个普通的函数。
@expression这种写法实际上是Object.defineProperty的语法糖。expression在求值后必须是一个函数，该函数会在运行时被调用，并将被装饰的声明信息作为参数传入。
配置
- 执行 命令初始化 。
- 取消注释以下两行代码以启用装饰器支持。
三、装饰器的类型
1. 类装饰器
// 类装饰器：可以不修改类本身的情况下，给类添加属性和方法等，参数 target 是类的构造函数
const Base: ClassDecorator = (target) => {
console.log(target);
target.prototype.xiaoman = 'xiaoman';
target.prototype.fn = () => {
console.log('111111111');
}
}
@Base
class Http {
}
const http = new Http() as any;
http.fn();
2. 装饰器工厂
装饰器工厂：通过闭包实现参数传递。由于默认参数为 ，因此需要额外封装一层函数。
// 装饰器工厂：利用闭包进行传参，因为原本默认的参数是 target 所以要再封装一层
import axios from 'axios'
namespace d2 {
const Base = (name: string) => {
const fn: ClassDecorator = (target) => {
// console.log(target);
target.prototype.name = name;
}
return fn;
}
@Base('mike')
class Http {
}
const http = new Http() as any;
console.log(http.name);
}3. 方法装饰器
参数
- ：对象的原型。
- ：方法的名称。
- ：方法的属性描述符。
const Get = (url: string) => {
const fn: MethodDecorator = (target, key, descriptor) => {
console.log(target, key, descriptor);
}
return fn;
}
class Http {
@Get('../data.json')
getList(data: any) {
console.log(data);
}
}打印结果
应用
常用于封装 发送请求，只需传入参数即可在 中获取结果。
const Get = (url: string) => {
const fn: MethodDecorator = (target, key, descriptor: PropertyDescriptor) => {
axios.get(url).then((res: any)=> {
descriptor.value(res.data); // descriptor.value 的值就是修饰的方法 getList
})
}
return fn;
}
class Http {
@Get('http://localhost:3000/data.json')
getList(data: any) {
console.log(data);
}
}输出结果
4. 参数装饰器
参数
- ：当前对象的原型。
- ：参数所在的函数名称。
- ：参数在数组中的位置。
const Param: ParameterDecorator = (target, key, index) => {
console.log(target, key, index);
}
class Http {
getList(@Param data: any) {
console.log(data);
}
}打印结果
应用场景：相对较少，可用于打印参数信息或执行参数前的操作，类似于函数之前的中间件。
5. 属性装饰器（不常用）
参数
- ：对象的原型。
- ：属性的名称。
const AgeDec: PropertyDecorator = (target, propertyKey) => {
console.log(target, propertyKey);
}
class Http {
@AgeDec
age: number;
constructor() {
this.age = 20;
}
}打印结果
四、总结
可以看到，使用装饰器存在两个显著的优点：
- 代码可读性变强了，装饰器命名相当于一个注释。
- 在不改变原有代码情况下，对原来功能进行扩展。
到此这篇关于TypeScript装饰器的作用、结构、类型及其应用场景（代码示例）的文章就介绍到这了,更多相关TypeScript装饰器5大类型内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！