Get error ElementArrayFinder is not assignable when trying return to next then in Promise chain

Question

I'm using TypeScript to automate E2E Test. If I do something such as self.all(by.xpath(".//thead/tr/th|.//thead/tr/td")).then... it work well.

However, if I put it in a Promise chain, my IDE highlights the text .all and says that "ElementArrayFinder is not assignable".

TS2345:Argument of type '() => ElementArrayFinder' is not assignable to parameter of type '(value: {}) => any[] | ElementFinder[] | IThenable'. Type 'ElementArrayFinder' is not assignable to type 'any[] | ElementFinder[] | IThenable'. Type 'ElementArrayFinder' is not assignable to type 'IThenable'. Property 'cancel' is missing in type 'ElementArrayFinder'.

getAllHeader() {
    let self = this;
    return new Promise(function (resolve, reject) {
        let textArr = [];
        browser.executeScript('arguments[0].scrollIntoView()', self.getWebElement())
            .then(function () {
                return self.all(by.xpath(".//thead/tr/th|.//thead/tr/td"))
            })
            .then(function (eleArr) {
      .................
            })
            .catch(function (reason) {
                reject(reason);
            })
    });

}

Answer 1

I believe that you should explicitly set the type of your self property to help the editor to know the available functions of the self element.

Like this:

let self:ElementFinder = this;

I tested it in my editor and it works.