TypeScript装饰器

最新推荐文章于 2024-08-04 22:12:27 发布

pg_li

最新推荐文章于 2024-08-04 22:12:27 发布

阅读量209

点赞数

分类专栏： # TypeScript

本文链接：https://blog.csdn.net/ligaoming_123/article/details/118151789

版权

TypeScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的装饰器，包括类装饰器、访问器装饰器、属性装饰器、方法装饰器和参数装饰器的用法。通过实例展示了如何使用装饰器来监视、修改或替换类的定义，以及如何应用于属性、方法和参数。装饰器是一种非侵入式的代码修改方式，常用于柯里化函数，增强代码功能。

摘要由CSDN通过智能技术生成

是一种特殊类型的声明，用来监视，修改或替换类定义，它能够被附加到类声明，方法，访问符，属性或参数上。使用"@"符号作为前缀。也是对原有代码外层包装一层处理逻辑，是一种非侵入式的改变。一般实现函数类似于柯里化函数，返回一个函数作为返回值。一共有类装饰器、访问器装饰器、属性装饰器、方法装饰器、参数装饰器这几种，但是没有有函数装饰器

一、类装饰器不传递参数

/**
 * 一、类装饰器 不传递参数
 * @param target
 */
 
function testFn(target) {
  target.age = 18;
}
 
@testFn
export class TestCode {
  name = 'TectCode'
}
const code = new TestCode();
console.log(code .name, code .age); // TestCode 18
 
/**
 * 类装饰器 传递参数
 * @param age
 */
 
function testFn(age) {
  /**
 * target 类本身
   */
  return function (target) {
    target.age = age;
  }
}
 
@testFn(22)
export class TestCode {
  name = 'TectCode';
  age: number;
}
const code = new TestCode();
console.log(code .name, code .age);  // TestCode 22

二、访问器装饰器主要应用于get set 修改该成员属性

/**
 * 二 访问器装饰器  主要应用于get set 修改该成员属性
 * @param value
 */
 
function testFn(value) {
  /**
 * target 类本身
 * propertyKey 属性名称
 * descriptor 该属性的属性描述符
   */
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.configurable = value;
  };
}
 
export class TestCode {
  name = 'TectCode';
  _age = 20;
  @testFn(false)
  get age() {
    return this._age;
  }
 
  @testFn(true)
  get ages() {
    return this._age;
  }
}

三、属性装饰器紧靠属性前面用于对属性的处理

/**
 * 三 属性装饰器 紧靠属性前面 用于对属性的处理
 * @param value
 */
 
function testFn(value) {
  /**
 * 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
 * propertyKey 属性名称
   */
  return function (target: any, propertyKey: string) {
    if (delete target[propertyKey]) {
      Object.defineProperty(target, propertyKey, {
        get: () => {
 
        },
        set: () => {
 
        },
        enumerable: true,
        configurable: true
      });
    }
  };
}
 
export class TestCode {
  @testFn('Hello ')
  name = 'TectCode';
}

四、方法装饰器紧靠方法前面用于对方法的替换、修改等处理

/**
 * 四 方法装饰器 紧靠方法前面 用于对方法的替换、修改等处理
 * @param value
 */
 
function testFn() {
  /**
 * 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
 * propertyKey 属性名称
   */
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 
  };
}
 
export class TestCode {
  @testFn
  name() {
    return 'TestCode'
  };
}

五、参数装饰器紧靠参数前面用于监视参数是否被传入

/**
 * 五 参数装饰器 紧靠参数前面 用于监视参数是否被传入
 */
 
function testFn() {
  /**
   * 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
   * propertyKey 属性名称
   * 参数在函数参数列表中的索引
   */
  return function (target: any, propertyKey: string, parameterIndex: number) {
 
  };
}
 
export class TestCode {
  name( @testFn _name) {
    return 'TestCode'
  };
}