通过 typescript 中的属性装饰器向属性对象添加一个函数答案

【问题标题】：add a function to the object of property through property decorator in typescript通过 typescript 中的属性装饰器向属性对象添加一个函数
【发布时间】：2018-02-16 19:28:27
【问题描述】：

有没有办法从属性装饰器向属性对象添加一个函数。我试图这样做，但无法在装饰器中获取属性对象的引用。我正在使用 Intern js 版本 4 进行 UI 自动化项目。我已经实现了页面对象模型来做到这一点。我在这里想要实现的是

将包含验证消息的 div 的 xpath 传递给页面对象通过属性装饰器的文本框。
从属性装饰器内部，在文本框的页面对象中添加一个函数到从该 div 中获取可见文本。

这是我迄今为止尝试过的：

ClientPage.ts

export class ClientPage extends AbstractSearchPage implements LandingPage {
  @Validate({xpath: '//sumit/shrestha'})
  public clientId: TextBox;
  constructor(remote: any) {
    super(remote)
    this.clientId = new TextBox(remote,'//*[@id="clientId"]')
    this.dataGrid = new DataGrid(remote, '//table[@id="Table"]')
    this.searchBtn = '//*[@id="search"]';
  }

  getPageUrl(): string {
    return '#/clients/clients'
  };
}

文本框.ts

export class TextBox extends InputElement {
constructor(remote: any, locator: any) {
    super(remote, locator);
}
async  enterValue(input: string) {
    await this.remote.findByXpath(this.locator).clearValue().type(input);
}
async  clearValue() {
    await this.remote.findByXpath(this.locator).clearValue()
    // return Promise.resolve(this);
}
}

验证.ts

export function Validate(config: any) {
var remote = getRemote();
return function (target: Object, property: string | symbol) {
    /*
   // I thought target is reference to Textbox object but it refers to 
   // ClientPage object and even clientpage object here (target) shows only 
   // functions when doing console.log(target)
    */
    console.log(config.xpath)
    target.prototype.requiredFieldValidation = async function (): Promise<string> {
        await target.enterValue('ddd')
        await  target.clearValue('ddd')
        return await remote.findByXpath(config.xpath).getVisibleText();
    }
}
}

【问题讨论】：

标签： javascript typescript intern

【解决方案1】：

target 是那里的ClientPage 的原型。你应该学习装饰器是如何工作的。例如，请参阅my article(rus)。

如果你想给对象添加函数，存储在字段中，有两种方法。

第一种方法 - 定义 get/set 访问器，当将值分配给属性时，将函数添加到该值。

export function Validate(config: any) {
    var remote = getRemote();
    return function (target: Object, property: string | symbol) {
        // Create get/set accessors for the property
        let value;
        let propertyDescription = {
            get: function() { 
                return value;
            },
            set: function(textBox) {
                value = textBox;
                // When textBox assigned to property, add function to object
                textBox.requiredFieldValidation = async function (): Promise<string> {
                    await this.enterValue('ddd')
                    await  this.clearValue('ddd')
                    return await remote.findByXpath(config.xpath).getVisibleText();
                }
            },
            configurable: true,
            enumerable: true
        };            
        Object.defineProperty(target, property, propertyDescription);
    }
}

那里working example

第二种方法，通过reflect-metadata获取属性类型（类Constructor），并在其原型中定义函数。您可以在example from the article 中找到使用反射元数据的示例。它使用类型信息来执行依赖注入。

【讨论】：