TypeScript系列教程十一《装饰器》

教程十一《装饰器》"/>

TypeScript系列教程十一《装饰器》

系列教程

• TypeScript系列教程一《开篇》
• TypeScript系列教程二《安装起步》
• TypeScript系列教程三《基础类型》
• TypeScript系列教程四《扩展类型》
• TypeScript系列教程五《对象类型》》
• TypeScript系列教程六《泛型》
• TypeScript系列教程七《接口》
• TypeScript系列教程八《类》
• TypeScript系列教程九《高级类型》
• TypeScript系列教程九《类型转换》-- keyof和typeof 操作
• TypeScript系列教程九《类型转换》-- 索引访问类型
• TypeScript系列教程九《类型转换》-- 条件类型
• TypeScript系列教程九《类型转换》-- 映射类型
• TypeScript系列教程九《类型转换》-- 条件类型
• TypeScript系列教程九《类型转换》-- 模板文本类型
• TypeScript系列教程十《模块》
• TypeScript系列教程十一《装饰器》 – 装饰器与继承
• TypeScript系列教程十一《装饰器》 – 类装饰器
• TypeScript系列教程十一《装饰器》 – 方法装饰器
• TypeScript系列教程十一《装饰器》 – reflect-metadata
• TypeScript系列教程十一《装饰器》 – 属性装饰器
• TypeScript系列教程十一《装饰器》 – 参数装饰器

方法装饰器在后端编程中见到是比较多的，路由、注入等场景都有大规模的应用。下面是开始学习TS的方法装饰器。

方法装饰器的定义

一个函数，返回 TypedPropertyDescriptor | void 参数如下：

• target: Object
• propertyKey：string | symbol
• descriptor： TypedPropertyDescriptor

declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;

不知道什么意思，先写一个简单的例子打印下，看看每一个参数是什么意思，

示例代码：

const get:MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {console.log("target:",target);console.log("propertyKey:",propertyKey);console.log("descriptor:",descriptor);
}class HttpRequest {@getgetAllData(params:{data:[]}){}
}

打印结果：

参数意义：

• target : 对于静态方法是构造函数，普通方法是原型对象
• propertyKey： 方法名称
• descriptor ： 方法描述 ，
• descriptor.value : 对于静态方法是构造函数，普通方法是原型对象
• descriptor.writable : 方法是否可以被重写
• descriptor.enumerable: 是否可以被枚举
• descriptor.configurable：是否可以改变、删除

方法装饰器示例

示例思路：

1. 实现一个get装饰器
2. get装饰器修饰函数可以拿到request 对象
3. request 对象是经过装饰器处理塞进函数的

代码示例:

const get:MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {const method = descriptor.valuedescriptor.value = () => {method({header:'这是请求头header',body:'请求内容'})}
}interface Request {header:string,body:string
}class HttpRequest {@getgetAllData(request?:Request){console.log(request);}
}let http = new HttpRequest()
http.getAllData()

方法装饰器工厂

方法装饰器工厂类似于类装饰器工厂，工厂加工产生的是方法装饰器。这个工厂需要参数提供条件。

示例思路，之前的例子，我们需要跟上请求路径。

示例代码：

const get: (path: string) => MethodDecorator = (path) => {return (target: Object,propertyKey: string | symbol,descriptor: PropertyDescriptor) => {const method = descriptor.value;(function () {method({ header: "这是请求头header", path: path, body: "请求内容" });})();};
};interface Request {header: string;path: string;body: string;
}class HttpRequest {@get("/getAll")getAllData(request?: Request) {console.log(request);}@get("/getList")getList(request?: Request) {console.log(request);}
}

控制台打印输出：