在 Typescript 中使用属性装饰器的真实示例

我在上一篇文章中讨论了TypeScript 中的类装饰器，今天讨论属性装饰器，如何定义和使用它来编写干净优雅的代码。

什么是属性装饰器

属性装饰器是一个函数，应用于我们的类中的属性声明。

它获取类的构造函数和属性的名称作为参数，利用这些信息，我们可以做一些有趣而酷的事情，比如更改默认定义或修改我们的对象实例，比如添加新属性或更改数据。

class User {
 @MyDecorator
 password: string;
}

如何创建我的属性装饰器。

我构建了 Min 属性装饰器，它检查属性是否具有最小长度，如果没有，则对象实例将具有一个带有消息的新错误属性。

我将逐步解释，或者您可以滚动阅读完整的代码，然后开始吧。

1- 将 Min 函数声明为装饰器。

装饰器是一个函数，但是因为我们使用工厂，所以 Min 函数需要限制数字并返回另一个需要对象和属性键的函数。

function Min(limit: number) {
  return function(target: Object, propertyKey: string) {

2- 定义 getter 和 setter 函数。

我们需要定义2个函数来处理用户需要使用装饰器读取或设置属性值的情况。

getter 自己返回属性的值。

let value : string;
    //the getter of the property to return the value.
    const getter = function() {
      return value;
    };

设置器在使用属性时获取属性的值并处理验证。

 const setter = function(newVal: string) {

      if(newVal.length < limit) { 
//waiting for Object.define implementation.
      }

3-使用 Object.defineProperty

属性错误需要使用Object.defineProperty来声明，关于 object.defineProperty 的简短故事是它有助于定义属性。

DefineProperty 方法采用 3 个参数：对象实例、属性名称以及具有配置（如值或 getter 和 setter）的对象。

 Object.defineProperty(target, 'errors', {
          value: `Your password should be bigger than ${limit}`
        });

4-使用 Object.defineProperty 和我们的函数重新定义属性。

下一步是关键，用装饰器重新定义属性，并设置 getter 和 setter 钩子以配合我们的逻辑。

 Object.defineProperty(target, propertyKey, {
      get: getter,
      set: setter
    });

完成！您对每个语句都有一个清晰的概述，然后随意阅读完整的代码。

function Min(limit: number) {
  return function(target: Object, propertyKey: string) { 
    let value : string;
    const getter = function() {
      return value;
    };
    const setter = function(newVal: string) {
       if(newVal.length < limit) {
        Object.defineProperty(target, 'errors', {
          value: `Your password should be bigger than ${limit}`
        });
      }
      else {
        value = newVal;
      }      
    }; 
    Object.defineProperty(target, propertyKey, {
      get: getter,
      set: setter
    }); 
  }
}

装饰器已准备好，类 User 将具有密码属性，然后使用 Min 装饰器，我将密码最小长度设置为 8。

class User {
    username: string;
    @Min(8)
    password: string;
    constructor(username: string, password: string){
        this.username = username;
        this.password = password;
    }    
}

当在构造函数中设置属性密码时，它会调用我们的装饰器和内部 getter 和 setter 钩子。

    let danyUser = new User("dany", "pass");
    console.log(danyUser);
    console.log(danyUser.errors);

因为密码不符合要求，所以错误属性将可用并包含该值。

[nodemon] starting `node app.js`
User { username: 'dany' }
Your password should be bigger than 8

就是这样！

希望以上内容能帮助你了解如何以及何时在 Typescript 中使用属性装饰器。如果你喜欢这篇文章，请分享！

照片由Ferenc Almasi在Unsplash上拍摄

鏂囩珷鏉ユ簮锛�https://dev.to/danywalls/using-property-decorators-in-typescript-with-a-real-example-44e