typescript学习之装饰器

清疚 2023-07-14 10:37 10阅读 0赞

*  List item 是一种特殊类型的申明，它能够被附加到类申明、方法、属性或参数上，可以修改类的行为
 *  通俗的讲，装饰器就是一个方法，可以注入到类、方法、属性或参数上来扩展类、属性、方法、参数的功能
 *  常见的装饰器： 类装饰器、属性装饰器、方法装饰器、参数装饰器
 *  装饰器的写法: 普通装饰器（无法传参）、装饰器工厂（可以传参）

#### 类装饰器 ####

*  普通类装饰器
    
    普通装饰器中的参数只有一个，就是当前类，不能传参

function createDecor(params:any) { 
      console.log(params); // 就是当前类
      params.prototype.newAttr = '动态给类添加属性';
      params.prototype.fn = function():void{ 
        console.log('动态给类添加方法')
      }
    }
    @createDecor // 注意在用装饰器的时候，这里不能加分号
    class CreateClass{ 
      constructor() { }
      getName() { 
        console.log('这个类本来的方法')
      }
    }
    const decor:any = new CreateClass();
    decor.getName();
    console.log(decor.newAttr);
    decor.fn();

*  装饰器工厂

function createDecor(params: string) {  // 定义装饰器
      console.log(params) // 这个参数就是装饰器传递的参数
      return function(target:any) { 
        console.log(target) // 这个target就是CreateClass这个类
        target.prototype.getInfo = function () { 
          console.log('动态创建的方法', params);
        }
      }
    }
    
    @createDecor('传递的参数')
    class CreateClass{ 
      constructor(){ }
      getName() { 
        console.log('类内部的方法')
      }
    }
    const decor:any = new CreateClass();
    decor.getInfo()

*  类装饰器修改类中的构造函数和方法

function decorObj(param:any) { 
      console.log(param) // param就是createObj这个类
      return class extends param{ 
        name:any = '我是修改后的名字';
        getName() { 
          console.log(this.name + '222222')
        }
      }
    }
    
    @decorObj
    class createObj { 
      public name:string | undefined;
      constructor(name:string) { 
        this.name = name;
      }
      getName() { 
        console.log(this.name)
      }
    }
    const obj = new createObj('张山');
    obj.getName(); // 打印 我是修改后的名字222222
    // 通过这个打印结构告诉我们，createObj的构造函数和getname这个方法都被修改了

*  属性装饰器

下面的参数target： 对于静态方法来说是类的构造函数，对于实例成员来说是原型对象prototype

function decorAttr(params:string) { 
      console.log(params, 11);
      return function (target:any, attr:string) { 
        console.log(target) // 注意这里target是CreateClass的prototype
        console.log(attr) // attr就是name 
        // 注意上面的name是在构造函数中初始化的，这里实在属性装饰器中初始化的
        target[attr] = params
      }
    } 
    
    class CreateClass { 
      @decorAttr('通过属性属性装饰器给name初始化')
      public name:string | undefined;
      constructor(){ }
      getName() { 
        console.log(this.name);
      }
    }
    const obj = new CreateClass();
    obj.getName()

*  方法装饰器

注意几点：  
1、方法装饰器修改类中的某个方法的时候，在该方法前面加一个装饰器，如果要修改多个，那就要加多个装饰器  
2、方法装饰器修改原来的方法的时候，相当于重新给方法名字重新赋值，如果还要保留原来的方法，那就需要在修改后的方法中执行原来的方法

function getMethods(params:string) { 
      // console.log(params);
      return function(p1:any, p2:any, p3:any) { 
        // console.log(p1) // 参数一：对于静态方法来说是类的构造函数，对于实例成员来说是原型对象prototype
        // console.log(p2) // 参数二：成员的名字
        // console.log(p3) // 参数三：成员的描述信息 
        let modifyMethods = p3.value; // p3.value就是createMethods中的modifyData这个方法
        p3.value = function (...args:any[]) {  // 改写createMethods中的modifyData这个方法
          args = args.map(item => String(item)) // 强制将modifyData方法中的参数转换为string类型
          console.log(args)
          
          modifyMethods.apply(this, args) // 相当于在修改后的方法中又执行了原本的modifyData这个方法
    
        }
      }
    }
    
    class createMethods{ 
      public name:string | undefined
      constructor() { }
      @getMethods('123')
      modifyData(...args:any[]) {  // 修改方法的时候，就在那个方法前面加一个装饰器
        console.log(args,'哈哈哈')
      }
      // @getMethods('456')
      getName() { 
        console.log('111')
      }
    }
    
    const me = new createMethods();
    me.modifyData('456',45454)

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 StencilJs学习之组件装饰器

stenciljs 可以方便的构建交互式组件支持以下装饰器 component state prop watch method el

约定不等于承诺〃/ 2024年03月17日 18:26/ 0 赞/ 62 阅读

相关《现代Typescript高级教程》装饰器

<table> <thead> <tr> <th><a href="https://link.juejin.cn?target=https%3A%2F%2Fw

川长思鸟来/ 2023年10月13日 21:19/ 0 赞/ 9 阅读

相关装饰器：TypeScript 开发者的救世主

如果您在 Java 世界中使用过 Spring 框架（或其他类似lombok的框架），您就会熟悉注释的力量。 @RestMapping在方法上添加注解！砰！它作为 API 公

亦凉/ 2023年10月12日 19:25/ 0 赞/ 45 阅读

相关 TypeScript 装饰器：完整指南

装饰器是很棒的功能，许多库都是由装饰器组成的，比如 react 和 angular。这是一个很棒的概念在本文中，我们将学习打字稿装饰器。什么是 TypeScript 装

àì夳堔傛蜴生んèń/ 2023年10月12日 13:57/ 0 赞/ 45 阅读

相关 typescript学习之装饰器

List item 是一种特殊类型的申明，它能够被附加到类申明、方法、属性或参数上，可以修改类的行为通俗的讲，装饰器就是一个方法，可以注入到类、方法、属性或参数上

清疚/ 2023年07月14日 10:37/ 0 赞/ 11 阅读

相关 python学习之旅-@property装饰器

@property装饰器作用：把一个方法变成属性调用。使得对属性的调用方便又安全。具体实现：使用property包装器来包装getter方法

清疚/ 2023年02月22日 05:17/ 0 赞/ 18 阅读

相关 TypeScript装饰器实现原理

TypeScript注解风格的装饰器 `@decorate`装饰器函数的作用是在调用`eat方法`之前执行执行自定义的功能 function decorate(

ゝ一世哀愁。/ 2022年12月28日 00:48/ 0 赞/ 139 阅读

相关 ⑥TypeScript 命名空间，装饰器（类、属性、方法、参数装饰器，装饰器执行顺序）

TypeScript 命名空间装饰器类装饰器属性装饰器方法装饰器参数装饰器装饰

短命女/ 2022年12月20日 12:48/ 0 赞/ 194 阅读

相关 TypeScript 入门学习（六）：TypeScript 装饰器

Typescript 装饰器装饰器是一种特殊类型的声明，它可以被附加到类声明，方法，属性或参数上，可以修改类的行为。通俗的讲，装饰器就是一个方法，可以注入到类、方法、属

短命女/ 2021年09月20日 16:10/ 0 赞/ 490 阅读

相关 typescript 装饰器

1、修改tsconfig.json "experimentalDecorators": true "emitDecoratorMetad

怼烎@/ 2021年07月25日 02:06/ 0 赞/ 433 阅读