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

代码语言：javascript复制

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

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

示例代码：

代码语言：javascript复制

const get:MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
  console.log("target:",target);
  console.log("propertyKey:",propertyKey);
  console.log("descriptor:",descriptor);
}

class HttpRequest {
  
  @get
  getAllData(params:{data:[]}){

  }
}

打印结果：

参数意义：

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

方法装饰器示例

示例思路：

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

代码示例:

代码语言：javascript复制

const get:MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
    const method = descriptor.value
    descriptor.value = () => {
      method({header:'这是请求头header',body:'请求内容'})
    }
}


interface Request {
  header:string,
  body:string
}

class HttpRequest {
  
  @get
  getAllData(request?:Request){
       console.log(request);
  }
}

let http = new HttpRequest()
http.getAllData()

方法装饰器工厂

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

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

示例代码：

代码语言：javascript复制

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);
  }
}

控制台打印输出：

typescript http

0 人点赞